文章目录
- 1、前言
- 2、抽离基本业务js
- 3、在具体组件中调用
-
- 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'}
]
