大量重复的代码不仅会降低开发效率，也不利于后期的维护。所以我们要想办法将可以复用的代码抽离出来。就像抽离成组件那样

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;

//通过点击按钮，调用方法，在方法中实现业务的调用
      <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 核心展示

//验证纯数字
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()
        }
    },
}