一个混迹于Github、Stack Overflow、开源中国、CSDN、博客园、稀土掘金、51CTO等 的野生程序员。
目标：分享更多的知识，充实自己，帮助他人
GitHub公共仓库：https://github.com/zhengyuzh
以github为主：
1、分享前端+后端基础知识
2、前后端框架知识+框架使用分析
3、热门前端+后端面试题（实时更新）
4、开源项目（主要包含大学课程设计）

将一些常用的方法，比如字符串格式化呀，时间格式话呀，常用的表单验证方法呀等等。可以抽离出为基础的业务。在组件中使用的时候，只需要将对应的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'}
            ]