JS设计模式-策略模式

策略模式是指对一系列的算法定义，并将每一个算法封装起来，而且使它们还可以相互替换。策略模式让算法独立于使用它的客户而独立变化。

优点：

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

简单取值

很多例子以绩效等级和薪资计算奖金为说明

let calculateBouns = (level,salary)=>{
    if(level=='A'){
        return salary * 1.4;
    }else if(level=='B'){
        return salary * 1.3;
    }else if(level=='C'){
        return salary * 1.2;
    }else{
        return salary;
    }
}

console.log(calculateBouns('A', 8000)); //11200
console.log(calculateBouns('C', 8000)); //9600

策略模式重构

//策略对象
class ruleA{
    calculate(salary){
        return salary * 1.4;
    }
} 

class ruleB{
    calculate(salary){
        return salary * 1.3;
    }
} 

class ruleC{
    calculate(salary){
        return salary * 1.2;
    }
} 

//奖金类
class Bouns{
    constructor(){
        this.salary = null;
        this.level = null;
    }

    setLevel(level){
        this.level = level;
    }

    setSalary(salary){
        this.salary = salary;
    }

    getBouns(){
        return this.level.calculate(this.salary);
    }
}

let tom = new Bouns(),jerry = new Bouns();
//设置薪资
tom.setSalary(8000);
jerry.setSalary(10000);
//设置策略对象
tom.setLevel(new ruleA());
jerry.setLevel(new ruleA());
console.log(tom.getBouns()); //11200
console.log(jerry.getBouns()); //14000

jerry.setLevel(new ruleB());
console.log(jerry.getBouns()); //13000

表单

还有一种理解策略模式的例子就是表单验证，通常会涉及到多个字段有效性判断

let form = document.getElementById("Form");
form.onsubmit = function(){
    if(form.username.value == ''){
        alert('用户名不能为空');
        return false;
    }else if(form.username.value.length <= 6){
        alert('用户名长度不能小于6位');
        return false;
    }else if(form.password.value.length <= 6){
        alert('密码长度不能小于6位');
        return false;
    }else if(!/(^1[3|5|8][0-9]{9}$)/.test(form.phone.value)){
        alert("手机号码格式不正确");
        return;
    }else{
        submit();
    }
}

这样实现的代码的缺点：

• 函数体积臃肿，包含了很多if判断
• 函数缺乏弹性，违反了开放-封闭原则
• 函数复用性差，如果增加表单需要类似验证，只能复制一遍

策略模式实现表单验证

// 策略对象
let strategys = {
    isEmpty: (value,errorMsg)=> {
        if(value === '') {
            return errorMsg;
        }
    },
    // 限制最小长度
    minLength: (value,length,errorMsg)=> {
        if(value.length < length) {
            return errorMsg;
        }
    },
    // 手机号码格式
    illegalPhone: (value,errorMsg)=> {
        if(!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
            return errorMsg;
        }
    } 
};

class Validator{
    constructor(){
        this.cache = []; //保存校验规则
    }

    addRule(dom,rules){
        var self = this;
        for(let i = 0, rule; rule = rules[i++]; ){
            let strategyAry = rule.strategy.split(":");
            let errorMsg = rule.errorMsg;
            self.cache.push(function(){
                let strategy = strategyAry.shift();
                strategyAry.unshift(dom.value);
                strategyAry.push(errorMsg);
                return strategys[strategy].apply(dom,strategyAry);
            });
        }
    }

    check(){
        for(let i = 0, fn; fn = this.cache[i++]; ) {
            let msg = fn(); // 开始效验 并取得效验后的返回信息
            if(msg) {
                return msg;
            }
        }
    }
}

// 代码调用
let form = document.getElementById("Form");
let validateFunc = function(){
    let validator = new Validator(); // 实例化Validator
    //添加一些校验规则
    validator.addRule(form.username,[
        {strategy: 'isEmpty',errorMsg:'用户名不能为空'},
        {strategy: 'minLength:6',errorMsg:'用户名长度不能小于6位'}
    ]);
    validator.addRule(form.password,[
        {strategy: 'minLength:6',errorMsg:'密码长度不能小于6位'},
    ]);
    validator.addRule(form.phone,[
        {strategy: 'illegalPhone',errorMsg:'手机号格式不正确'},
    ]);
    return  validator.check();
};

form.onsubmit = function(){
    let errorMsg = validateFunc();
    if(errorMsg){
        alert(errorMsg);
        return false;
    }else{
        submit();
    }
}

策略模式属于对象行为模式，主要针对一组算法，将每一个算法封装到具有共同接口的独立的类中，使得它们可以相互替换。