一个混迹于Github、Stack Overflow、开源中国、CSDN、博客园、稀土掘金、51CTO等 的野生程序员。
目标：分享更多的知识，充实自己，帮助他人
GitHub公共仓库：/zhengyuzh
以github为主：
1、分享前端+后端基础知识
2、前后端框架知识+框架使用分析
3、热门前端+后端面试题（实时更新）
4、开源项目（主要包含大学课程设计）
文章目录
1、前言2、抽离基本业务js3、在具体组件中调用3.1 引入3.2 组件中调用3.3 实现的效果 4、实际项目中的运用4.1 核心展示将一些常用的方法，比如字符串格式化呀，时间格式话呀，常用的表单验证方法呀等等。可以抽离出为基础的业务。在组件中使用的时候，只需要将对应的js文件引入，便可以直接使用其中的方法。达到代码复用的效果，同时也便于后期的维护。
1、前言
大量重复的代码不仅会降低开发效率，也不利于后期的维护。所以我们要想办法将可以复用的代码抽离出来。就像抽离成组件那样
2、抽离基本业务js
这里可以写一些共用的方法，可以写多个方法，方法之间也可以相互调用。
以下案例只是作为一个说明，说明在组件中调用改公共业务中的方法是可行的。
我这里只作演示，就简单写了一个函数。就是当传入的参数大于5的时候返回原参数，如果不大于5，则返回0
function testA(str) {let val = "";if (str > 5) {val = str +5} else {val = 0;}return val;}const MyTest = {testA}export default MyTest;
3、在具体组件中调用
3.1 引入
在需要使用的地方引入，可以引入多个不同的业务组件，业务组件之间也可以继承
import action from "@/standard-js-lib/business/common/test";
3.2 组件中调用
//通过点击按钮，调用方法，在方法中实现业务的调用<span>测试MyTest的值是{{ MyTest }}</span><el-button type="primary" @click="changeStatus()">点我改变MyTest的值</el-button>//在方法中，使用公共的业务方法changeStatus() {var num = action.testA(this.MyTest);if (num == 0) {this.MyTest = action.testA(10);} else if (num > 15) {this.MyTest = -1;}},//也可以在钩子函数中提前调用，完成一些其它的操作created() {this.MyTest = action.testA(this.MyTest);},
3.3 实现的效果
直接在钩子函数中调用：
初始值MyTest是2。所以调用改方法后的返回值是0
点击按钮，触发方法。在方法中，此时的MyTest值是0，再次调用方法，传入的参数是10。由于方法内部 10 > 5。方法的返回值是15。（主要目的是测试成功调用了公共业务方法）
再次点击按钮，再次调用公共业务方法，返回值20。20>15，所以此时的MyTest的值是- 1；
4、实际项目中的运用
就是将表单验证的常用方法封装到一个js文件中，在不同的vue表单页面，可以选择不同的方法进行表单验证，以此达到复用代码的效果，后期维护也很方便
vue中将验证表单输入框的方法写在一个js文件中（表达式验证邮箱、身份证、号码、两次输入的密码是否一致）
4.1 核心展示
js文件
//验证纯数字let regNumber = /^[0-9]*$/;//验证身份证let IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;let IDre15 = /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/;//验证邮箱let regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;//验证邮箱的正则表达式export default{//这里截取部分验证//验证用户昵称checkNickName:(rule, value, callback)=> {value = value.replace(/\s*/g, "");//去除空格if (!value) {return callback(new callback('请输入昵称'))}if (value.length < 0 || value.length > 10) {callback(new Error("昵称的长度范围是0-10，请输入合法的名称！！！"))} else if (regNumber.test(value)) {callback(new Error("输入的内容不能是纯数字！！！"))} else {callback()}},}
对应页面引入改js文件
import rules from '@/api/rules.js';
//这里截取部分表单验证，具体的案例关于vue表单可查阅官网。这里是调用具体的方法password: [{required: true, message: '请输入密码', trigger: 'blur'},{validator:rules.checkPwd,trigger:'blur'}],surepassword:[{required:true,message:'请再次输入密码',trigger:'blur'},{validator:checkPwdSure,trigger:'blur'}]
