JavaScript设计模式 策略模式

在现实中，我们到达一个地方，通常可以选择不同的方式，例如自行车，火车，汽车，飞机等。

在程序设计中，通常也会有这样的情况，实现一个功能有多个方案可以选择，比如一个压缩文件的程序，既可以选择zip算法，也可以选择gzip算法。

而这种情况，在设计模式中，称为策略模式。

策略模式的定义:定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。

例子：

很多公司的年终奖是根据员工的工资基数和年底绩效情况来方法的。如S级绩效为4倍工资，A级有3倍工资，B级有两倍工资。

在不使用策略模式的情况下，通常这样设计代码：

var calculateBonus = function(performanceLevel,salary){
        if(performanceLevel === "S"){
            return salary * 4;
        }

        if(performanceLevel === "A"){
            return salary * 3;
        }

        if(performanceLevel === "B"){
            return salary * 2;
        }
    };
    calculateBonus("B",2000); // 输出4000
    calculateBonus("A",2500); // 输出7500

可以发现，这段代码非常简单，但也有很大的问题。

1.calculateBonus函数比较庞大，包含了很多if-else语句，这些语句需要覆盖所有的逻辑分支。

2.缺乏弹性，如果增加了绩效等级C，需要深入函数内部修改。

3.算法复用性差，重用只能通过复制粘贴。

 

使用策略模式重构代码。

策略模式的程序至少由两部分组成，第一部分是策略类，策略类封装了具体的算法，并负责具体的计算过程。第二部分是环境类Context,Context接受客户的请求，并将其委托给某一个策略类。

现在模仿传统面向对象语言中策略模式的实现：

//定义策略类
    var performanceS = function(){};
    performanceS.prototype.calculate = function(salary){
        return salary * 4;
    };
    var performanceA = function(){};
    performanceA.prototype.calculate = function(salary){
        return salary * 3;
    };
    var performanceB = function(){};
    performanceB.prototype.calculate = function(salary){
        return salary * 2;
    };

    //定义奖金类
    var Bonus = function(){
        this.salary = null;    //原始工资
        this.starategy = null; //对应的策略对象
    };
    //设置工资
    Bonus.prototype.setSalary = function(salary){
        this.salary = salary;
    };
    //设置绩效
    Bonus.prototype.setStrategy = function(strategy){
        this.strategy = strategy;
    };
    //获取奖金
    Bonus.prototype.getBonus = function(){
        return this.strategy.calculate(this.salary);
    };

    //测试
    var bonus = new Bonus();
    bonus.setSalary(2000);
    bonus.setStrategy(new performanceS);  
    console.log(bonus.getBonus())         // 输出8000
    bonus.setSalary(3000);
    bonus.setStrategy(new performanceB);  
    console.log(bonus.getBonus())         //输出6000

在上面的例子中，Bonus充当了环境类，将客户的请求委托给策略类的某一个。

 

在Js中，实际可以有更方便的做法，Js的函数也是对象，也就是函数也可以作为参数调用。

 //策略类
    var performanceS = function(salary){
        return salary*4;
    };
    var performanceA = function(salary){
        return salary*3;
    };
    var performanceB = function(salary){
        return salary*2;
    };
    //环境类
    var bonus = function(fn,salary){
        return fn(salary);
    };
    //测试
    console.log(bonus(performanceS,1000));  //输出4000
    console.log(bonus(performanceB,3000));  //输出6000

 

 

策略模式的优缺点：

优点：

       1.利用组合、委托、多态等技术和思想，避免多重条件选择语句。

       2.易于切换、理解、扩展。

       3.可以复用。

缺点：

       1.拥有许多策略类或者策略对象，实际上比把它们负责的逻辑堆砌在Context中要好。

       2.用户比须了解所有的策略类，才能选择一个最合适的策略类。

 

最后，通过策略模式实现一个表单验证：

 

define(function(){
    var input_judge = {
             noNull:function(value,errorMsg){
                 if(!value)
                     return errorMsg;
             },
             minLen:function(value,length,errorMsg){
                 if(value.length<length)
                     return errorMsg;
             },
             PhoneNum:function(value,errorMsg){
                var reg = /^[1-9][0-9]{10}$/;
                //console.log(reg.test(value))
                if(!reg.test(value))
                    return errorMsg;
             },
             MaxLen:function(value,length,errorMsg){
                 if(value.length>length)
                     return errorMsg;
             },
             NumAndLetter:function(value,errorMsg){
                 var regNum = /[0-9]/;
                 var regLet = /[a-zA-Z]/;
                 var regAll = /^[0-9a-zA-Z]+$/
                 if(!regNum.test(value) || !regLet.test(value) || !regAll.test(value))
                     return errorMsg;
             },
             Email:function(value,errorMsg){
                 var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                 if(!reg.test(value))
                     return errorMsg;
             }
         };
    //添加规则
    function add(domInput,rule,errorMsg){
        domInput = $(domInput)[0];
        domInput.Check = domInput.Check ? domInput.Check : [];
        domInput.errorMsg = "";
        for(var i=0,length = rule.length;i<length;i++){
           (function(i){
                var ary = rule[i].split(":");
                domInput.Check.push(function(){
                    if(!ary.strategy){
                        ary.strategy = ary.shift();
                        ary.push(errorMsg);
                    }else{
                        ary.shift();
                    }
                    ary.unshift($(domInput).val());
                    return input_judge[ary.strategy].apply(domInput,ary);
                });
           })(i);
        }
    };
    //检查全部输入框是否符合
    function checkAll(){
        for(var i =0,length = domPush.cache.length;i<length;i++){
            var $domInput = domPush.cache[i];
            if($domInput[0].errorMsg || !$domInput.val()){
                return false;
            }
        }
        return true;
    }
    //触发事件执行
    function domPush(domInput,span,failColor,sucColor,Event,fn,arg){
        var $domInput = $(domInput);
        domInput = $domInput[0];
        domPush.cache = domPush.cache ? domPush.cache : [];
        domPush.cache.push($domInput);
        $domInput.bind(Event,function(event) {
            for(var i =0,length=domInput.Check.length;i<length;i++){
                var func = domInput.Check[i];
                domInput.errorMsg = func();
                console.log(func())
                if(domInput.errorMsg){
                    $(span).html(domInput.errorMsg).css('color', failColor);
                    return;
                }
            }
            domInput.errorMsg = "";
            if(fn){
                fn.apply(this,arg);
            }else{
                $(span).html("It's Ok!").css('color', sucColor);
            }
        });
    };
 return {
     add:add,
     domPush:domPush,
     checkAll:checkAll
 }
});