JavaScript设计模式--策略模式

策略模式的定义是：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。
一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程。第二个部分是环境类 Context，Context 接受客户的请求，随后把请求委托给某一个策略类。要做到这点，说明 Context 中要维持对某个策略对象的引用。

其实策略模式的含义还是很好理解，下面我们通过两个实例来详细说明一下。

使用策略模式实现缓动动画

思路分析：我们在定义一段动画时，免不了要明确几个要素：

动画开始时，目标的所在位置
动画结束时目标的位置
动画开始的时间
动画结束的时间

在动画过程中，我们通过缓动算法来实时改变目标的位置。

常见缓动算法：

//四个参数分别表示动画已消耗时间，目标原始位置，目标结束位置，动画持续时间
var tween={
    linear:function(t,b,c,d){
        return c*t/d+b;
    },
    easeIn:function(t,b,c,d){
        return c*(t/=d)*t+b;
    },
    strongEaseIn:function(t,b,c,d){
        return c*(t/=d)*t*t*t*t+b;
    },
    sineaseIn: function( t, b, c, d ){
        return c*(t/=d)*t*t+b;
    },
    sineaseOut: function(t,b,c,d){
        return c*((t=t/d-1)*t*t+1)+b;
    } 
}

这些缓动算法就是一个个可以用于动画效果的策略，我们只需要根据不同的需求来使用即可，在本例中，我们要让目标在一段时间内发生位置的连续变化，在有个缓动算法后，只需要考虑逻辑上的实现，即记录和改变目标的位置信息。

var Animate=function(dom){
    this.dom = dom;           //进行运动的 dom 节点
    this.startTime = 0;       //动画开始时间
    this.startPos = 0;        //动画开始时，dom 节点的位置，即 dom 的初始位置
    this.endPos = 0;          //动画结束时，dom 节点的位置，即 dom 的目标位置
    this.propertyName = null; //dom 节点需要被改变的 css 属性名
    this.easing = null;       //缓动算法
    this.duration = null;     //动画持续时间
}; 

我们还需要一个方法用于触发一段动画效果

tip:The `Element.getBoundingClientRect()` method returns the size of an element and its position relative to the viewport.
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。返回的DOMRect对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

//参数
//propertyName：要改变的 CSS 属性名，比如'left'、'top'，分别表示左右移动和上下移动。
//endPos： 小球运动的目标位置。
//duration： 动画持续时间。
//easing： 缓动算法。
Animate.prototype.start = function( propertyName, endPos, duration, easing ){
    this.startTime=+new Date;                                       //动画启动时间
    this.startPos=this.dom.getBoundingClientRect()[ propertyName ]; //dom 节点初始位置
    this.propertyName=propertyName;                                 //dom 节点需要被改变的 CSS 属性名
    this.endPos=endPos;                                             //dom 节点目标位置
    this.duration=duration;                                         //动画持续事件
    this.easing=tween[ easing ];                                    //缓动算法
    var self=this;
    var timeId=setInterval(function(){                              //启动定时器，开始执行动画
        if (self.step()===false){                                   //如果动画已结束，则清除定时器
             clearInterval( timeId );
        }
    },19);
}; 

至此，我们仍然仅仅是初始化了一个即将拥有动画效果的dom对象，真正计算和改变目标位置的逻辑被放在step()方法中

Animate.prototype.step=function(){
    var t=+new Date;//取得当前时间
    if(t>=this.startTime+this.duration){//动画结束
        this.update(this.endPos);//更新小球的 CSS 属性值
        return false;
    }
    var pos=this.easing(t-this.startTime,this.startPos,
    this.endPos-this.startPos,this.duration);
    // pos 为小球当前位置
    this.update(pos);//更新小球的 CSS 属性值
};
Animate.prototype.update=function(pos){
    this.dom.style[this.propertyName] = pos + 'px';
};
//尝试调用
var div=document.getElementById('div');
var animate=new Animate(div);
animate.start('left',500,1000,'strongEaseOut');
//animate.start('top',1500,500,'strongEaseIn'); 

运行结果：

See the Pen Ojzwjm by MachineGun (@ThunderboltSmile) on CodePen.

使用策略模式实现表单验证

表单验证是一种很常见的需求，当我们在验证表单输入是否合法时，常常需要进行多方面的验证，比如有些输入需要限制长度，有些要用到正则匹配，还有需要非空验证的，这些验证方式咳哟分成一个一个的策略，从而针对不同的情景来进行组合。

下面是策略对象，保存着验证方式。

/***********************策略对象**************************/
var strategies = {
    isNonEmpty:function(value,errorMsg){
        if(value===''){
        return errorMsg;
        }
    },
    minLength:function(value,length,errorMsg){
        if(value.length < length){
            return errorMsg;
        }
    },
    isMobile:function(value,errorMsg){
        if(!/(^1[3|5|8][0-9]{9}$)/.test(value)){
            return errorMsg;
        }
    }
}; 

有了策略对象后，我们需要一个验证类来调用这些策略。

tip:func.apply(target,[params]);
apply将在target的context下执行func方法，并以params作为参数

/***********************Validator 类**************************/
var Validator=function(){
    this.cache=[];
};
Validator.prototype.add=function(dom,rules){
    var self=this;
    for (var i=0,rule;rule=rules[i++]){
        (function(rule){
            var strategyAry=rule.strategy.split(':');
            var errorMsg=rule.errorMsg;
            self.cache.push(
                function(){
                    var strategy = strategyAry.shift(); 
                    strategyAry.unshift(dom.value);
                    strategyAry.push(errorMsg);
                    return strategies[strategy].apply(dom,strategyAry);
                }
            );
         })(rule)
     }
 };
 Validator.prototype.start=function(){
     for(var i=0,validatorFunc;validatorFunc=this.cache[i++];){
         var errorMsg=validatorFunc();
         if (errorMsg){
             return errorMsg;
         }
     }
 }; 

解释：以栈的形式将每一项的验证先存储起来，再用start逐一调用，一旦发生错误，立即返回。因此我们会发现验证顺序与表单的填写顺序相反。
现在，我们可以尝试着调用这些验证策略。

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

实际上在JavaScript这种将函数作为一等对象的语言里,策略模式已经融入到了语言本身当中，我们经常用高阶函数来封装不同的行为，并且把它传递到另一个函数中。当我们对这些函数发出“调用”的消息时，不同的函数会返回不同的执行结果。在 JavaScript 中，“函数对象的多态性”来得更加简单。