[JS设计模式]：策略模式及应用-计算奖金、表单验证的实现（5）

介绍

策略模式的意义是定义一系列的算法，把它们一个个封装起来，并且使它们可相互替换。此模式让算法的变化不会影响到使用算法的客户。

实现

举一个例子，比如我们做数据合法性校验，一般是通过swich来实现，或者通过if语句来实现，如果校验规则多了的话，那么代码的扩展性和维护性就很差了，而且进行单元测试就越来越复杂，代码如下：

var validator = {
    validate: function(value,type) {
        switch(type) {
            case 'isNonEmpty':
                return true
            case 'isNumber':
                return true;
            case 'isAlphaNum':
                return true;
            default:
                return true;
        }
    }
}

alert(validator.validate('123','isNonEmpty'))

怎么避免上面代码的弊端呢，我们可以使用策略模式把相同的工作代码封装成不同的验证类，我们只需要通过传递不同的名称来调用不同的验证类方法（也即是不同的算法），实现代码如下：

var validator = {
    types: { // 存放验证规则
        isNonEmpty: {
            validate: function(value) {
                return value !== ''
            },
            instructions: '传入的值不能为空'
        },
        isNumber: {
            validate: function(value) {
                return !isNaN(value);
            },
            instructions: '传入的值不是数字'
        },
        isAlphaNum: {
            validate: function(value) {
                return !/[^a-z0-9]/i.test(value)
            },
            instructions: '传入的值只能是数字或者字母，不能是特殊字符'
        }
    }, 
    config: {}, // 需要验证的类型
    messages: [], // 存放错误信息
    validate: function(data) { // 传入的data 为key-value的键值对
        var i, type, checker, resultOk;
        this.messages = []; // 首先清空错误信息
        for(i in data) {
            if(data.hasOwnProperty(i)) { // 判断i不是原型上的属性
                type = this.config[i]; // 获取验证类型
                if(!type) { // 没有当前校验类型直接跳过(不需要验证的)
                    continue;
                }
                checker = this.types[type]; // 获取验证规则的验证类方法
                if(!checker) { // 验证规则类不存在 直接抛出异常
                    throw {
                        name: "ValidationError",
                        message: "No handler to validate type " + type
                    }
                }
                resultOk = checker.validate(data[i]);
                if(!resultOk) { // 验证不通过
                    this.messages.push(checker.instructions);
                }
            }
        }
        return this.hasErrors();
    },
    hasErrors: function() {
        return this.messages.length !== 0;
    }
    
}

使用方式如下：

var data = {
    firstName: '',
    lasName: 'shu',
    age: '',
    userName: 'tom shu'
}
validator.config = {
    firstName: 'isNonEmpty',
    age: 'isNumber',
    userName: 'isAlphaNum'
}

validator.validate(data);
if(validator.hasErrors()) {
    console.log(validator.messages.join("\n"));
}
// 结果:
// 传入的值不能为空
// 传入的值只能是数字或者字母，不能是特殊字符

 其它策略模式示例

jquery中使用的animate方法

$( div ).animate( {"left: 200px"}, 1000, 'linear' );  //匀速运动
$( div ).animate( {"left: 200px"}, 1000, 'cubic' );  //三次方的缓动

这 2 句代码都是让 div 在 1000ms 内往右移动 200 个像素. linear(匀速) 和 cubic(三次方缓动) 就是一种策略模式的封装.

计算奖金

比如公司的年终奖是根据员工的工资和绩效来考核的，绩效为A的人，年终奖为工资的4倍，绩效为B的人，年终奖为工资的3倍，绩效为C的人，年终奖为工资的2倍；现在我们使用一般的编码方式会如下这样编写代码：

var calculateBouns = function(salary,level) {
    if(level === 'A') {
        return salary * 4;
    }
    if(level === 'B') {
        return salary * 3;
    }
    if(level === 'C') {
        return salary * 2;
    }
};
// 调用如下：
console.log(calculateBouns(4000,'A')); // 16000
console.log(calculateBouns(2500,'B')); // 7500

缺点：函数含有很多if语句，缺乏弹性，算法复用性差，如果其它地方有类似的算法，但是规则不一样，这些代码不能通用。

使用策略模式代码如下：

//代码如下：
var obj = {
        "A": function(salary) {
            return salary * 4;
        },
        "B" : function(salary) {
            return salary * 3;
        },
        "C" : function(salary) {
            return salary * 2;
        } 
};
var calculateBouns =function(level,salary) {
    return obj[level](salary);
};
console.log(calculateBouns('A',10000)); // 40000

策略模式不仅仅只封装算法，我们还可以对用来封装一系列的业务规则，只要这些业务规则目标一致，我们就可以使用策略模式来封装它们。

表单校验

比如常见的就是注册页面，需要对用户名，密码，手机号等进行规则校验，验证规则如下：

• 用户名不能为空；
• 密码不能小于6位；
• 手机号码符合手机正则规则

HTML代码如下：

<form action="" id="registerForm" method="post" onsubmit="return submitValidate()">
    <p>
        <label>请输入用户名：</label>
        <input type="text" name="userName" />
    </p>
    <p>
        <label>请输入密码：</label>
        <input type="text" name="password" />
    </p>
    <p>
        <label>请输入手机号码：</label>
        <input type="text" name="phoneNumber" />
    </p>
    <div>
        <button type="submit">提交</button>
    </div>
</form>

submitValidate验证方法如下：

function submitValidate() {
    var registerForm = document.getElementById("registerForm");
    if(registerForm.userName.value === '') {
            alert('用户名不能为空');
            return false;
        }
    else if(registerForm.password.value.length < 6) {
        alert("密码的长度不能小于6位");
        return false;
    }
    else if(!/(^1[0-9]{10}$)/.test(registerForm.phoneNumber.value)) {
        alert("手机号码格式不正确");
        return false;
    }
    return true;
}

 缺点：

• submitValidate函数中的if else-if代码会根据验证项而逐渐变大；
• submitValidate函数缺乏弹性，如果添加新的校验规则是添加else-if语句，但是如果是修改原来的验证规则，那么就需要改函数内的代码，违反开放-封闭原则；
• 算法的复用性差，如果其它页面也需要用类似的校验，那么这个方法就不能共用了，可以又是复制代码。

 下面我们使用策略模式来重构上面的代码。

第一步，封装策略对象，也即是验证的不同算法，代码如下：

var strategys = {
    isNotEmpty: function(value,errorMsg) {
        if(value === '') {
            return errorMsg;
        }
    },
    // 限制最小长度
    minLength: function(value,length,errorMsg) {
        if(value.length < length) {
            return errorMsg;
        }
    },
    // 手机号格式
    mobileFormat: function(value,errorMsg) {
        if(!/(^1[0-9]{10}$)/.test(value)) {
            return errorMsg;
        }
    }
}

第二步，实现Validator类，Validator类在这里作为Context，负责接收用户的请求并委托给strategy 对象。

通俗的话就是添加表单中需要验证的一些规则以及获取验证结果（是否验证通过），如下代码：

function Validator() {
    this.cache = []; // 保存效验规则
}

Validator.prototype = {
    constructor: Validator,
    add: function(dom,rule,errorMsg) {
        var str = rule.split(":"); // minLength:6的场景
        var fn = function() {
            var strategyType = str.shift(); // 删除str数组中的第一个元素并返回，即是获取校验规则的函数名
            str.unshift(dom.value); // 往数组str的第一位插入value值
            str.push(errorMsg);
            return strategys[strategyType].apply(dom,str);
        }
        this.cache.push(fn);
    },
    start: function() {
        for(var i = 0, fn; fn = this.cache[i++];) {
            var msg = fn();
            if(msg) {
                return msg;
            }
        }
    }
} 

调用方式：

function submitValidate() {
    var registerForm = document.getElementById("registerForm");
    var validator = new Validator();
    validator.add(registerForm.userName,'isNotEmpty', '用户名不能为空');
    validator.add(registerForm.password,'minLength:6', '密码的长度不能小于6位');
    validator.add(registerForm.phoneNumber,'mobileFormat', '手机号码格式不正确');
    var resultMsg = validator.start();
    if(resultMsg) {
        alert(resultMsg);
        return false;
    }
    return true;
}

 完整的JS代码：

var strategys = {
    isNotEmpty: function(value,errorMsg) {
        if(value === '') {
            return errorMsg;
        }
    },
    // 限制最小长度
    minLength: function(value,length,errorMsg) {
        if(value.length < length) {
            return errorMsg;
        }
    },
    // 手机号格式
    mobileFormat: function(value,errorMsg) {
        if(!/(^1[0-9]{10}$)/.test(value)) {
            return errorMsg;
        }
    }
}

function Validator() {
    this.cache = []; // 保存效验规则
}

Validator.prototype = {
    constructor: Validator,
    add: function(dom,rule,errorMsg) {
        var str = rule.split(":"); // minLength:6的场景
        var fn = function() {
            var strategyType = str.shift(); // 删除str数组中的第一个元素并返回，即是获取校验规则的函数名
            str.unshift(dom.value); // 往数组str的第一位插入value值
            str.push(errorMsg);
            return strategys[strategyType].apply(dom,str);
        }
        this.cache.push(fn);
    },
    start: function() {
        for(var i = 0, fn; fn = this.cache[i++];) {
            var msg = fn();
            if(msg) {
                return msg;
            }
        }
    }
} 

function submitValidate() {
    var registerForm = document.getElementById("registerForm");
    var validator = new Validator();
    validator.add(registerForm.userName,'isNotEmpty', '用户名不能为空');
    validator.add(registerForm.password,'minLength:6', '密码的长度不能小于6位');
    validator.add(registerForm.phoneNumber,'mobileFormat', '手机号码格式不正确');
    var resultMsg = validator.start();
    if(resultMsg) {
        alert(resultMsg);
        return false;
    }
    return true;
}

 以上代码我们只实现了给一个dom元素绑定一条验证规则，那如果需要绑定多条验证规则呢？

比如上面的代码我们只能效验输入框是否为空，validator.add(registerForm.userName,'isNotEmpty','用户名不能为空');但是如果我们既要效验输入框是否为空，还要效验输入框的长度不要小于10位的话，那么我们期望需要像如下传递参数：

validator.add(registerForm.userName,[{strategy:'isNotEmpty',errorMsg:'用户名不能为空'},{strategy: 'minLength:10',errorMsg:'用户名长度不能小于10位'}])

 我们只需要修改一下add方法即可，如下代码：

function Validator() {
    this.cache = []; // 保存效验规则
}

Validator.prototype = {
    constructor: Validator,
    add: function(dom,rules) {
        var self = this;
        for(var i = 0, len = rules.length; i < len; i++) {
            var rule = rules[i];
            (function(rule){
                var str = rule.strategy.split(":"); // minLength:6的场景
                var fn = function() {
                    var strategyType = str.shift(); // 删除str数组中的第一个元素并返回，即是获取校验规则的函数名
                    str.unshift(dom.value); // 往数组str的第一位插入value值
                    str.push(rule.errorMsg);
                    return strategys[strategyType].apply(dom,str);
                }
                self.cache.push(fn);
            })(rule)
        }
    },
    start: function() {
        for(var i = 0, fn; fn = this.cache[i++];) {
            var msg = fn();
            if(msg) {
                return msg;
            }
        }
    }
} 

调用方式改变一下：

function submitValidate() {
    var registerForm = document.getElementById("registerForm");
    var validator = new Validator();
    validator.add(registerForm.userName, [{
        strategy: 'isNotEmpty',
        errorMsg: '用户名不能为空'
    }, {
        strategy: 'minLength:10',
        errorMsg: '用户名长度不能小于10位'
    }]);
    validator.add(registerForm.password, [{
        strategy: 'minLength:6',
        errorMsg: '密码的长度不能小于6位'
    }]);
    validator.add(registerForm.phoneNumber, [{
        strategy: 'mobileFormat',
        errorMsg: '手机号码格式不正确'
    }]);
    var resultMsg = validator.start();
    if (resultMsg) {
        alert(resultMsg);
        return false;
    }
    return true;
}

完整的代码如下：

var strategys = {
    isNotEmpty: function(value, errorMsg) {
        if (value === '') {
            return errorMsg;
        }
    },
    // 限制最小长度
    minLength: function(value, length, errorMsg) {
        if (value.length < length) {
            return errorMsg;
        }
    },
    // 手机号格式
    mobileFormat: function(value, errorMsg) {
        if (!/(^1[0-9]{10}$)/.test(value)) {
            return errorMsg;
        }
    }
}

function Validator() {
    this.cache = []; // 保存效验规则
}

Validator.prototype = {
    constructor: Validator,
    add: function(dom, rules) {
        var self = this;
        for (var i = 0, len = rules.length; i < len; i++) {
            var rule = rules[i];
            (function(rule) {
                var str = rule.strategy.split(":"); // minLength:6的场景
                var fn = function() {
                    var strategyType = str.shift(); // 删除str数组中的第一个元素并返回，即是获取校验规则的函数名
                    str.unshift(dom.value); // 往数组str的第一位插入value值
                    str.push(rule.errorMsg);
                    return strategys[strategyType].apply(dom, str);
                }
                self.cache.push(fn);
            })(rule)
        }
    },
    start: function() {
        for (var i = 0, fn; fn = this.cache[i++];) {
            var msg = fn();
            if (msg) {
                return msg;
            }
        }
    }
}

function submitValidate() {
    var registerForm = document.getElementById("registerForm");
    var validator = new Validator();
    validator.add(registerForm.userName, [{
        strategy: 'isNotEmpty',
        errorMsg: '用户名不能为空'
    }, {
        strategy: 'minLength:10',
        errorMsg: '用户名长度不能小于10位'
    }]);
    validator.add(registerForm.password, [{
        strategy: 'minLength:6',
        errorMsg: '密码的长度不能小于6位'
    }]);
    validator.add(registerForm.phoneNumber, [{
        strategy: 'mobileFormat',
        errorMsg: '手机号码格式不正确'
    }]);
    var resultMsg = validator.start();
    if (resultMsg) {
        alert(resultMsg);
        return false;
    }
    return true;
}

当然我们也可以把验证各种类型的算法放到构造函数Validator原型上，这儿就不处理了。

关于表单校验的文章可参考：

• JS常见的API扩展形式（prototype、jquery、vue插件封装）以及怎样设计出易扩展的表单验证功能？
• 【笔记】原生JS实现验证框架 checkFun

总结

策略模式优点：

• 策略模式利用组合，委托等技术和思想，有效的避免很多if条件语句。
• 策略模式提供了开放-封闭原则，使代码更容易理解和扩展。
• 策略模式中的代码可以复用。

参考

• 深入理解JavaScript系列（33）：设计模式之策略模式
• Javascript常用的设计模式详解-八：理解javascript中的策略模式
• 腾讯全端 AlloyTeam 团队 Blog-【Javascript 设计模式 9】-策略模式