定义

策略模式的定义是:定义一系列算法,把它们一个个封装起来,并且使它们可以互相替换.通俗来讲就是用一个盒子装很多颗糖果 如果有需要了那么让一个人去拿 这样如果我们想增加不同的糖果只需要往盒子里面放就行了

5.1 使用策略模式计算奖金

绩效S的人年终奖有4倍工资,A的是3倍,B的是2倍

1.最初代码的实现

var calculateBonus=function(per,salary){ 
   if(per==='S'){ 
       return salary*4 
   } 
    if(per==='A'){ 
       return salary*3 
   } 
    if(per==='B'){ 
       return salary*2 
   } 
} 
   calculateBonus( 'B', 20000 ); // 输出:40000 
   calculateBonus( 'S', 6000 ); // 输出:24000 

这样写的话.如果要增加绩效C的话 需要再写一个if else分支. 前文说了..设计模式就是为了消除这一大堆分支所出现的.

2.使用组合函数重构代码

var performanceS = function( salary ){ 
   return salary * 4; 
}; 
var performanceA = function( salary ){ 
   return salary * 3; 
}; 
var performanceB = function( salary ){ 
   return salary * 2; 
}; 
var calculateBonus = function( performanceLevel, salary ){ 
   if ( performanceLevel === 'S' ){ 
       return performanceS( salary ); 
   } 
   if ( performanceLevel === 'A' ){ 
       return performanceA( salary ); 
   } 
   if ( performanceLevel === 'B' ){ 
       return performanceB( salary ); 
   } 
}; 
calculateBonus( 'A' , 10000 ); // 输出:30000 

这样虽然得到一定的改善了.那么calculateBonus越来越大 if分支也会越来越多

3.使用策略模式重构代码

一个基于策略的模式程序至少有两部分组成,第一个部分是一组策略类,策略类封装了具体的算法,并且负责具体的计算过程.第二部分是环境类Context,Context接受客户的请求,随后把请求委托给某一个策略类,要做到这点,说明Context要维持对某个策略对象的引用用传统的OOP语言来实现

//定义策略类 
   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.strategy=null;//对应的策略类,也就是Context要维持对某个策略对象的引用 
   } 
   Bonus.prototype.setSalary=function(salary){ 
       this.salary=salary 
   } 
   Bonus.prototype.setStrategy=function(strategy){ 
       this.strategy=strategy 
   } 
   Bonus.prototype.getBonuns=function(){ 
       return this.strategy.calculate(this.salary) 
   } 

定义一系列算法,把它们各自封装成策略类,算法被封装在策略类内部的方法里.在客户对Context发起请求的时候,Context总是把请求委托给这些策略对象中间的某一个进行计算.那么基于上述的话,我们完成剩下的代码, 创建一个策略类,然后对Bonus也就是Context发起请求,Bonus会把这个请求委托给策略类中的某个算法

var bonus=new Bonus(); 
bonus.setStrategy( new performanceS() ); // 设置策略对象 
console.log( bonus.getBonus() ); // 输出:40000 
bonus.setStrategy( new performanceA() ); // 设置策略对象 
console.log( bonus.getBonus() ); // 输出:30000 

5.2 JavaScript中的策略模式

var strategies = { 
   "S": function( salary ){ 
       return salary * 4; 
   }, 
   "A": function( salary ){ 
       return salary * 3; 
   }, 
   "B": function( salary ){ 
       return salary * 2; 

   } 
}; 

Context并没有要求要用类来表示,那么可以用函数来实现

var calculateBonus=function(level,salary){ 
   return strategies[level](salary) 
} 
console.log( calculateBonus( 'S', 20000 ) ); // 输出:80000 
console.log( calculateBonus( 'A', 10000 ) ); // 输出:30000 

5.3 多态在策略模式中的体现

在使用策略模式重构时,我们消除了原程序中大片的ifelse.所有跟奖金计算有关的逻辑都放在策略类中,Context仅仅是遵守单一职责,把这些请求委托给策略类.

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

5.4.1 实现动画效果的原理

实际上就是更改元素的CSS如 left top background-position.

5.4.2 思路和一些准备工作

我们的目标是编写一个动画类和一些缓动算法,让小球以各种各样的缓动效果在页面中运动在运动开始之前,我们得获取一些信息

  • 动画开始时候,小球所在的原始位置
  • 小球移动的目标位置
  • 动画开始时的准确时间点
  • 小球运动持续的时间

随后我们会用setInterval创建一个定时器,每隔19ms执行一次,执行的时候会通过算法更新小球运动的信息.

5.4.3 让小球运动起来

首先我们可以从flash移植缓动算法封装成策略类t:动画已经消耗的时间b:小球原始位置c:小球目标位置d:动画持续的总时间返回的是小球应该处于的当前位置

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; 
   }, 
   strongEaseOut: function(t, b, c, d){ 
       return c * ( ( t = t / d - 1) * t * t * t * t + 1 ) + 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; 
   } 
}; 

编写HTML

<body> 
   <div style="position:absolute;background:blue" id="div">我是div</div> 
</body> 

随后我们来定义一个animate类也就是Context 由Context来委托请求

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;//动画持续的时间 
} 

Animate.prototype.start=function(propertyName,endPos,duration,easing){ 
   this.startTime=+new Date;//动画启动时间 
   this.startPos=this.dom.getBoundingClientRect()[propertyName];//这个方法返回一个矩形对象,包含四个属性:left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。 
   this.propertyName=propertyName;//dom节点需要被改变的css属性名 
   this.endPos=endPos;//动画结束位置 
   this.duration=duration;//动画持续时间 
   this.easing=tween[easing];//缓动算法 

   var self=this; 
   var timeId=setInterval(function(){ 
       if(self.step()===false){ 
           clearInterval(timeId) 
       } 
   },19) 
} 

  • propertyName:需要改变的css
  • endPos:结束位置
  • duration:持续时间
  • easing:缓动算法

接下来定义step方法

Animate.prototype.step=function(){ 
   var t=+new Date;//获取当前时间 
   if(t>=this.startTime+this.duration){ //如果动画已经执行完毕 也就是持续时间 
       this.update(this.endPos);//为了防止有一些位置没有移动 
       return false 
   }; 
   var pos=this.easing(t-this.startTime,this.startPos,this.endPos-this.startPos,this.duration); 
   this.update(pos) 
} 

接下来定义update方法

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' ); 

策略模式实现并不复杂,关键是如何从策略模式的实现背后,找到封装变化,委托和多态性这些思想的价值.

5.5 更广义的算法

从定义上看策略模式是封装算法的.但是在实际开发中,使用策略模式也可以用来封装一系列的’业务规则’,只要这些业务规则指向的目标一致,并且可以被替换使用,我们就可以用策略模式来封装它们

5.6 表单验证

比如我们需要实现以下几条验证

  • 用户名不为空
  • 密码长度不能少于6位
  • 手机号码必须符合格式

5.6.1表单校验的第一个版本

未引入策略模式

    <form action="http:// xxx.com/register" id="registerForm" method="post"> 
       请输入用户名:<input type="text" name="userName"/ > 
       请输入密码:<input type="text" name="password"/ > 

       请输入手机号码:<input type="text" name="phoneNumber"/ > 
       <button>提交</button> 
   </form> 
———————— 
   var registerForm = document.getElementById( 'registerForm' ); 
       registerForm.onsubmit = function(){ 
           if ( registerForm.userName.value === '' ){ 
               alert ( '用户名不能为空' ); 
               return false; 
           } 
           if ( registerForm.password.value.length < 6 ){ 
               alert ( '密码长度不能少于6 位' ); 
               return false; 
           } 
           if ( !/(^1[3|5|8][0-9]{9}$)/.test( registerForm.phoneNumber.value ) ){ 
               alert ( '手机号码格式不正确' ); 
               return false; 
           } 
       } 

首先看到一大堆ifelse那么基本上可以断定这个程序是有被重构的余地的.

5.6.2策略模式重构代码

首先创建一个策略类用来保存业务逻辑

var strategies={ 
   isNonEmpty:function(value,errorMsg){//不为空 

   }, 
   minLength: function( value, length, errorMsg ){ // 限制最小长度 
       if ( value.length < length ){ 
           return errorMsg; 
           82 第5 章 策略模式 
       } 
   }, 
   isMobile: function( value, errorMsg ){ // 手机号码格式 
       if ( !/(^1[3|5|8][0-9]{9}$)/.test( value ) ){ 
           return errorMsg; 
       } 
   } 
} 

其次我们实现Context也就是Validator类,负责接收用户的请求并且委托给strategy对象.

var Validator=function(){ 
   this.cache=[];//保存校验规则 
} 
Validator.prototype.add=function(dom,rule,errorMsg){ 
   var ary=rule.split(':');//通过:来获取参数 
   this.cache.push(function(){//把校验的步骤用空函数包装起来 
       var strategy=ary.shift();//用户挑选的strategy 
       ary.unshift(dom.value);//把input的value添加进参数列表 
       ary.push(errorMsg);//自定义错误消息 
       return strategies[strategy].apply(dom,ary);//策略类中的this指向的是dom元素 
   }) 
} 
Validator.prototype.start=function(){ 
   for(var i=0,validatorFunc;validatorFunc=this.cache[i++];){ 
       var msg=validatorFunc();//开始校验,并且取得校验后的结果 
       if(msg){ //如果有错误信息那么就没校验通过,返回错误信息 
           return msg 
       } 
   } 
} 

执行和添加校验规则

var validateFunc=function(){ 
   var validator=new Validator();//创建一个validator对象 
   //添加一些校验规则 
   validator.add( registerForm.userName, 'isNonEmpty', '用户名不能为空' ); 
   validator.add( registerForm.password, 'minLength:6', '密码长度不能少于6 位' ); 
   validator.add( registerForm.phoneNumber, 'isMobile', '手机号码格式不正确' ); 
   var errorMsg = validator.start(); // 获得校验结果 
   return errorMsg; // 返回校验结果 
} 

var registerForm = document.getElementById( 'registerForm' ); 
registerForm.onsubmit = function(){ 
   var errorMsg = validataFunc(); // 如果errorMsg 有确切的返回值,说明未通过校验 
   if ( errorMsg ){ 
       alert ( errorMsg ); 
       return false; // 阻止表单提交 
   } 
}; 

首先这个策略模式 定义了策略类也就是校验规则 其实用了一个对象Context委托请求给策略类 也就是Validator函数 至于validateFunc这个函数是用来启动策略模式的.

5.6.3 给某个文本输入框添加多种规则

如果我们期望一个文本框用户名不能为空,且它输入的长度不小于10呢?我们期望这样

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

实际要改写也很简单 我们只需要改动Context委托对象,也就是Valiprototype.add函数

Validator.prototype.add=function(dom,rules){ 
   var self=this; 
   for(var i=0;rule;rule=rules[i++]){ 
       (function(rule){ 
           var ary=rule.strategy.split(':');//通过:来获取参数 
           var errorMsg=rule.errorMsg; 
           this.cache.push(function(){//把校验的步骤用空函数包装起来 
               var strategy=ary.shift();//用户挑选的strategy 
               ary.unshift(dom.value);//把input的value添加进参数列表 
               ary.push(errorMsg);//自定义错误消息 
               return strategies[strategy].apply(dom,ary);//策略类中的this指向的是dom元素 
           }) 
       })(rule) 
   } 
} 

只需要加一层闭包添加多重验证就okay了.完整代码参考

/***********************策略对象**************************/ 
var strategies = { 
   isNonEmpty: function( value, errorMsg ){ 
       console.log(277,this) 
       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; 
       } 
   } 
}; 
/***********************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; 
       } 
   } 
}; 
/***********************客户调用代码**************************/ 
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 位' 
   }]); 
   var errorMsg = validator.start(); 
   return errorMsg; 
} 
registerForm.onsubmit = function(){ 
   var errorMsg = validataFunc(); 
   if ( errorMsg ){ 
       alert ( errorMsg ); 
       return false; 
   } 

}; 

5.7策略模式的优缺点

  • 策略模式利用组合,委托和多态等技术和思想,可以有效的避免多重条件选择语句.
  • 策略模式提供了对外开发-封闭原则的完美支持,将算法封装在独立的strategy中,使得它们易于切换,易于理解,易于扩展
  • 策略模式中的算法也可以复用在系统的其他地方,从而避免许多重复的复制粘贴工作
  • 在策略模式中利用组合和委托来让Context拥有执行算法能力,这也是继承的一种更轻便的代替方案

当然策略模式也有一些缺点,但并不严重首先使用策略模式会增加许多策略类火灾策略对象,但实际上这比把它们负责的逻辑堆砌在Context中要好

5.8 一等函数对象与策略模式

var S=function(){ 
   return salary*4 
} 
var A=function(){ 
   return salary*3 
} 
var B=function(){ 
   return salary*2 
} 
var calculateBonus=function(func,salary){ 
   return func(salary) 
} 
calculateBonus(S,10000)