前言

面试除了八股文，最怕的就是被问到：项目中做过什么优化、项目中做过什么让自己自豪的、项目中解决过哪些问题...因为被问到好几次而且回答的不是很满意，所以决定开始整理一些这方面的案例，于是就在项目里搜寻——

在小小的项目里面，找呀找呀找

找小小的案例，做小小的总结

在大大的项目里面，找呀找呀找

找大大的案例，做大大的总结

在特别大的项目里面，找呀找呀找

找特别多的案例，做特别多的总结

尬吗？尬就对了，我也被自己尬死了

if (!this.submitFormData.businessTripType) {
    uni.$u.toast('请选择外出类型')
    return
}
if (!this.submitFormData.beginDate) {
    uni.$u.toast('请选择开始时间')
    return
}
if (!this.submitFormData.endDate) {
    uni.$u.toast('请选择结束时间')
    return
}	
if (!this.submitFormData.approver) {
    uni.$u.toast('请选择审批人员')
    return
}
if (!this.submitFormData.description) {
    uni.$u.toast('请填写详细事由')
    return
}

相信这段代码在实际项目中也经常遇到类似的，甚至比这多更多的if语句

那么这次整理的就是用策略模式优化表单提交中的if/else语句

表单规则类（策略类）

创建一个validate.js文件来专门处理表单提交的验证，首先定义一个策略类，它是用来定义表单校验规则的，可以根据业务需求来进行增加调整。

// utils/validate.js

// 策略类，用来定义表单校验规则，可以根据业务需求调整
const ruleStrategys = {
    // 是否为空
    isNotEmpty: (value, errorMsg) => {
        if (!value) {
            return errorMsg
        }
    },
    // 手机号码格式
    isMobile: (value, errorMsg) => {
        if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
            return errorMsg
        }
    }
    // 更多定义...
}

表单校验保存类（环境类）

策略类定义好后，再定义一个环境类(表单校验保存类)，在它的原型上定义两个方法addRule、startExec，分别是添加规则方法和执行规则方法

// utils/validate.js

// 环境类
export function Validator() {
    this.saveRules = [] // 保存校验规则
}
Validator.prototype.addRule = function(rule, dom, errorMsg) {
    this.saveRules.push(() => {
        return ruleStrategys[rule](dom, errorMsg)
    })
}
Validator.prototype.startExec = function() {
    for (var i = 0; i < this.saveRules.length; i++) {
        var validatorFunc = this.saveRules[i]
        var msg = validatorFunc() // 开始效验 并取得效验后的返回信息
        if (msg) {
            return msg
        }
    }
}

使用

import { Validator } from '@/utils/validate.js';

var validateFunc = () => {
    var validator = new Validator(); // 创建一个Validator对象
    validator.addRule('isNotEmpty', this.submitFormData.businessTripType, '请选择外出类型');
    validator.addRule('isNotEmpty', this.submitFormData.beginDate, '请选择开始时间');
    validator.addRule('isNotEmpty', this.submitFormData.endDate, '请选择结束时间');
    validator.addRule('isNotEmpty', this.submitFormData.approver, '请选择审批人员');
    validator.addRule('isNotEmpty', this.submitFormData.description, '请填写详细事由');
    var errorMsg = validator.startExec(); // 获得效验结果
    return errorMsg; // 返回效验结果
};
var errorMsg = validateFunc();
if (!errorMsg) {
    // 校验成功的操作
} else {
    uni.$u.toast(errorMsg);
}

总结

• 不适合在后台管理系统中用，因为后台管理系统一般都是直接用Form表单的校验

• 实际项目中应当灵活变动，优化前未必不好（更直观、多人协作的时候也不容易出错）；优化后未必完美（不方便处理多条件判断的情况、表单项不多反而增加了代码复杂度）

记录这个方法的初心是为了能够在面试的时候“有话可谈”，如果你有其他见解，欢迎评论区交流~

但是我是一个比较固执的人，我从来不会在意别人跟我说什么，让我去做，让我去怎么做，我不管。因为这样实在是——