策略模式-表单验证

策略模式：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。
在使用策略模式的过程中，选择某种策略，不再将使用if或者switch来进行判断，而是将策略的选择过程交给语言本身，并且对每一种的策略能做到在不修改原有结构上进行策略的更换。

使用if：

if(userName === '') {
  alert('用户名不能为空');
  console.log(false);
}

使用策略模式：

let strategies = {
    isNonEmpty: function (value, errorMsg) {
        if (value === '') {
            return errorMsg;
        }
    }
}
let resulet = strategies['isNonEmpty'](dom, userName, errorMsg)
console.log(result);

使用策略模式实现策略的增删以及动态配置表单验证。

<form id="registerForm" method="POST">
        请输入用户名：<input type="text" name="userName"/>
        请输入密码：<input type="text" name="password"/>
        请输入手机号：<input type="text" name="phoneNumber"/>
        <button>提交</button>
</form>

// 获取DOM节点
let registForm = document.getElementById('registerForm');

// 定义策略,策略可进行配置
let strategies = new Map();
strategies.set('isNonEmpty', function (value, errorMsg) {
    if (value === '') {
        return errorMsg;
    }
});
strategies.set('minLength', function (value, length, errorMsg) {
    if (value.length < length) {
        return errorMsg;
    }
})
strategies.set('isMobile', function (value, errorMsg) {
    if (!/^1[3|5|8][0-9]{9}$/.test(value)) {
        return errorMsg;
    }
})
// 定义验证器对象，cache用于储存需要验证的内容
let Validator = function () {
    this.cache = [];
};

// 定义添加验证内容的方法
Validator.prototype.add = function (dom, rule, errorMsg) {
    let ary = rule.split(':');
    this.cache.push(function () {
        let strategy = ary.shift()
        ary.unshift(dom.value);
        ary.push(errorMsg);
        //使用策略模式，根据strategy的值选择使用哪一个策略模式
        return strategies.get(strategy).apply(dom, ary);
    })
}
Validator.prototype.start = function () {
    for (let i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
        let msg = validatorFunc();
        if (msg) {
            return msg;
        }
    }
}

let validator = new Validator();
//添加两个用户名的规则
validator.add(registForm.userName, 'isNonEmpty', '用户名不能为空');
validator.add(registForm.userName, 'minLength:10', '用户名长度不能小于10位');
// 还可添加其他规则：
// validator.add(registForm.password, 'minLength:6', '密码长度不能少于6位');
// validator.add(registForm.phoneNumber, 'isMobile', '手机号码格式不正确');


registForm.onsubmit = function () {
    let errorMsg = validator.start();
    if (errorMsg) {
        alert(errorMsg);
    }
};

既然能动态调用算法，也可以动态渲染组件，比如VueRouter，采用策略模式，根据路由来动态渲染组件，或者Vue中的插槽slot等等动态选择的问题，有点类似于Map的思想。
策略模式是行为型模式，策略模式解决的主要是“选择”行为，将“选择”这个行为封装起来，将选择的过程交给语言本身，而非仅仅通过代码的条件语句来决定选择哪一种策略。

策略模式-表单验证

推荐阅读更多精彩内容