javascript设计模式——策略模式
前面的话
在程序设计中，常常遇到类似的情况，要实现某一个功能有多种方案可以选择。比如一个压缩文件的程序，既可以选择zip算法，也可以选择gzip算法。这些算法灵活多样，而且可以随意互相替换。这种解决方案就是本文将要介绍的策略模式。策略模式是指定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换
奖金计算
策略模式有着广泛的应用。以年终奖的计算为例进行介绍。很多公司的年终奖是根据员工的工资基数和年底绩效情况来发放的。例如，绩效为S的人年终奖有4倍工资，绩效为A的人年终奖有3倍工资，而绩效为B的人年终奖是2倍工资
下面是一个名为calculateBonus的函数来计算每个人的奖金数额。该函数接收两个参数：员工的工资数额和他的绩效考核等级
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', 20000 ); // 输出：40000 calculateBonus( 'S', 6000 ); // 输出：24000
这段代码十分简单，但是存在着显而易见的缺点：该函数比较庞大，包含了很多if-else语句，这些语句需要覆盖所有的逻辑分支；该函数缺乏弹性，如果增加了一种新的绩效等级C，或者想把绩效S的奖金系数改为5，必须深入calculateBonus函数的内部实现，违反开放封闭原则；算法复用性差，如果在程序其他地方需要重用这些计算奖金的算法，只能选择复制粘贴
下面使用组合函数来重构代码，把各种算法封装到一个个的小函数里面，这些小函数有着良好的命名，可以一目了然地知道它对应着哪种算法，它们也可以被复用在程序的其他地方
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函数有可能越来越庞大，而且在系统变化的时候缺乏弹性
策略模式指的是定义一系列的算法，把它们一个个封装起来。策略模式的目的就是将算法的使用与算法的实现分离开来
在这个例子里，算法的使用方式是不变的，都是根据某个算法取得计算后的奖金数额。而算法的实现是各异和变化的，每种绩效对应着不同的计算规则
一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程。第二个部分是环境类Context，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; }; //定义奖金类Bonus： var Bonus = function(){ this.salary = null; // 原始工资 this.strategy = 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( 10000 ); bonus.setStrategy( new performanceS() ); // 设置策略对象 console.log( bonus.getBonus() ); // 输出：40000 bonus.setStrategy( new performanceA() ); // 设置策略对象 console.log( bonus.getBonus() ); // 输出：30000
策略模式
上面的代码中，让strategy对象从各个策略类中创建而来，这是模拟一些传统面向对象语言的实现。实际上在javascript语言中，函数也是对象，所以更简单和直接的做法是把strategy直接定义为函数
var strategies = { "S": function( salary ){ return salary * 4; }, "A": function( salary ){ return salary * 3; }, "B": function( salary ){ return salary * 2; } };
同样，Context也没有必要必须用Bonus类来表示，用calculateBonus函数充当Context来接受用户的请求。经过改造，代码的结构变得更加简洁
var calculateBonus = function( level, salary ){ return strategies[ level ]( salary ); }; console.log( calculateBonus( 'S', 20000 ) ); // 输出：80000 console.log( calculateBonus( 'A', 10000 ) ); // 输出：30000
缓动动画
通过使用策略模式重构代码，消除了原程序中大片的条件分支语句。所有跟计算奖金有关的逻辑不再放在Context 中，而是分布在各个策略对象中。Context并没有计算奖金的能力，而是把这个职责委托给了某个策略对象。每个策略对象负责的算法已被各自封装在对象内部。当对这些策略对象发出“计算奖金”的请求时，它们会返回各自不同的计算结果，这正是对象多态性的体现，也是“它们可以相互替换”的目的。替换 Context 中当前保存的策略对象，便能执行不同的算法来得到想要的结果
有一段时间网页游戏非常流行，HTML5版本的游戏可以达到不逊于Flash游戏的效果。用javascript实现动画效果的原理跟动画片的制作一样，动画片是把一些差距不大的原画以较快的帧数播放，来达到视觉上的动画效果。在javascript中，可以通过连续改变元素的某个CSS属性，比如left、top、background-position来实现动画效果
目标是编写一个动画类和一些缓动算法，让小球以各种各样的缓动效果在页面中运动。 现在来分析实现这个程序的思路。在运动开始之前，需要提前记录一些有用的信息，至少包括以下信息：动画开始时，小球所在的原始位置；小球移动的目标位置；动画开始时的准确时间点；小球运动持续的时间
随后，用setInterval创建一个定时器，定时器每隔19ms循环一次。在定时器的每一帧里，把动画已消耗的时间、小球原始位置、小球目标位置和动画持续的总时间等信息传入缓动算法。该算法会通过这几个参数，计算出小球当前应该所在的位置。最后再更新该div对应的CSS属性，小球就能够顺利地运动起来了
在实现完整的功能之前，先了解一些常见的缓动算法，这些算法最初来自Flash，但可以非常方便地移植到其他语言中。这些算法都接受4个参数，这4个参数的含义分别是动画已消耗的时间、小球原始位置、小球目标位置、动画持续的总时间，返回的值则是动画元素应该处在的当前位置。代码如下：
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; } };
接下来，开始编写完整的代码，首先在页面中放置一个 div
<div style="position:absolute;background:blue" id="div">我是div</div>
接下来定义Animate类，Animate的构造函数接受一个参数：即将运动起来的dom节点
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方法负责启动这个动画，在动画被启动的瞬间，要记录一些信息，供缓动算法在以后计算小球当前位置的时候使用。在记录完这些信息之后，此方法还要负责启动定时器。代码如下：
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 ); };
Animate.prototype.start方法接受以下4个参数
propertyName：要改变的 CSS 属性名，比如'left'、'top'，分别表示左右移动和上下移动。 endPos： 小球运动的目标位置。 duration： 动画持续时间。 easing： 缓动算法
再接下来是Animate.prototype.step方法，该方法代表小球运动的每一帧要做的事情。在此处，这个方法负责计算小球的当前位置和调用更新CSS属性值的方法Animate.prototype.update。代码如下：
Animate.prototype.step = function(){ var t = +new Date; // 取得当前时间 if ( t >= this.startTime + this.duration ){ // (1) 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.step方法返回false，可以通知Animate.prototype.start方法清除定时器
最后是负责更新小球CSS属性值的Animate.prototype.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' );
通过这段代码，可以看到小球按照期望以各种各样的缓动算法在页面中运动
表单校验
在一个Web项目中，注册、登录、修改用户信息等功能的实现都离不开提交表单。在将用户输入的数据交给后台之前，常常要做一些客户端力所能及的校验工作，比如注册的时候需要校验是否填写了用户名，密码的长度是否符合规定，等等。这样可以避免因为提交不合法数据而带来的不必要网络开销。假设正在编写一个注册的页面，在点击注册按钮之前，有如下几条校验逻辑：1、用户名不能为空；2、密码长度不能少于6位；3、手机号码必须符合格式
现在编写表单校验的第一个版本
<form action="http://xx.com/register" id="registerForm" method="post"> 请输入用户名：<input type="text" name="userName"/ > 请输入密码：<input type="text" name="password"/ > 请输入手机号码：<input type="text" name="phoneNumber"/ > <button>提交</button> </form> <script> 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; } } </script>
这是一种很常见的代码编写方式，它的缺点跟计算奖金的最初版本一模一样：registerForm.onsubmit函数比较庞大，包含了很多if-else语句，这些语句需要覆盖所有的校验规则；registerForm.onsubmit函数缺乏弹性，如果增加了一种新的校验规则，或者想把密码的长度校验从6改成8，都必须深入registerForm.onsubmit函数的内部实现，违反开放封闭原则；算法的复用性差，如果在程序中增加了另外一个表单，这个表单也需要进行一些类似的校验，那很可能将这些校验逻辑复制得漫天遍野
下面用策略模式来重构表单校验的代码，很显然第一步要把这些校验逻辑都封装成策略对象
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; } } };
接下来实现Validator类。Validator类在这里作为Context，负责接收用户的请求并委托给strategy对象
var validataFunc = 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; // 阻止表单提交 } };
先创建了一个validator对象，然后通过validator.add方法，往validator对象中添加一些校验规则。validator.add方法接受3个参数，以下面这句代码说明：
validator.add(registerForm.password,'minLength:6','密码长度不能少于6位');
registerForm.password为参与校验的input输入框；’minLength:6’是一个以冒号隔开的字符串。冒号前面的minLength代表客户挑选的strategy对象，冒号后面的数字6表示在校验过程中所必需的一些参数；’minLength:6’表示校验registerForm.password这个文本输入框的value最小长度为6。如果这个字符串中不包含冒号，说明校验过程中不需要额外的参数信息，比如’isNonEmpty’；第3个参数是当校验未通过时返回的错误信息
往validator对象里添加完一系列的校验规则之后，会调用validator.start()方法来启动校验。如果validator.start()返回了一个确切的errorMsg字符串当作返回值，说明该次校验没有通过，此时需让registerForm.onsubmit方法返回false来阻止表单的提交。
最后是 Validator 类的实现：
var Validator = function(){ this.cache = []; // 保存校验规则 }; Validator.prototype.add = function( dom, rule, errorMsg ){ var ary = rule.split( ':' ); // 把strategy 和参数分开 this.cache.push(function(){ // 把校验的步骤用空函数包装起来，并且放入cache var strategy = ary.shift(); // 用户挑选的strategy ary.unshift( dom.value ); // 把input 的value 添加进参数列表 ary.push( errorMsg ); // 把errorMsg 添加进参数列表 return strategies[ strategy ].apply( dom, ary ); }); }; Validator.prototype.start = function(){ for ( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){ var msg = validatorFunc(); // 开始校验，并取得校验后的返回信息 if ( msg ){ // 如果有确切的返回值，说明校验没有通过 return msg; } } };
使用策略模式重构代码之后，仅仅通过”配置“的方式就可以完成一个表单的校验， 这些校验规则也可以复用在程序的任何地方，还能作为插件的形式，方便地被移植到其他项 目中。在修改某个校验规则的时候，只需要编写或者改写少量的代码。比如想将用户名输入框的校验规则改成用户名不能少于10 个字符。可以看到，这时候的修改是毫不费力的。代码如下：
validator.add( registerForm.userName, 'isNonEmpty', '用户名不能为空' ); // 改成： validator.add( registerForm.userName, 'minLength:10', '用户名长度不能小于 10 位' );
目前表单校验实现留有一点小遗憾：一 个文本输入框只能对应一种校验规则，比如，用户名输入框只能校验输入是否为空：
validator.add( registerForm.userName, 'isNonEmpty', '用户名不能为空' );
如果既想校验它是否为空，又想校验它输入文本的长度不小于 10 呢？期望以这样的形式进行校验：
validator.add( registerForm.userName, [{ strategy: 'isNonEmpty', errorMsg: '用户名不能为空'}, {
strategy: 'minLength:6',
errorMsg: '用户名长度不能小于 10 位'
}] );
下面提供的代码可用于一个文本输入框对应多种校验规则：
<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> <script> /***********************策略对象**************************/ 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; } } }; /***********************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; } }; </script>
总结
策略模式是一种常用且有效的设计模式，它利用组合、委托和多态等技术和思想，可以有效地避免多重条件选择语句。它提供了对开放—封闭原则的完美支持，将算法封装在独立的strategy中，使得它们易于切换，易于理解，易于扩展。策略模式中的算法也可以复用在系统的其他地方，从而避免许多重复的复制粘贴工作。.在策略模式中利用组合和委托来让Context拥有执行算法的能力，这也是继承的一种更轻便的替代方案
当然，策略模式也有一些缺点，但这些缺点并不严重。首先，使用策略模式会在程序中增加许多策略类或者策略对象，但实际上这比把它们负责的逻辑堆砌在Context中要好。其次，要使用策略模式，必须了解所有的strategy，必须了解各个strategy之间的不同点，这样才能选择一个合适的strategy