js设计模式-策略模式
策略模式： 定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。将不变的部分和变化的部分隔开是每个设计模式的主题，策略模式也不例外，策略模式的目的就是将算法的使用与算法的实现分离开来。（自己改进后的代码用了大量的这种方式）
以不同绩效级别发放不同的奖金为例：
var strategies = { "S": function( salary ){ return salary * 4; }, "A": function( salary ){ return salary * 3; }, "B": function( salary ){ return salary * 2; } }; var calculateBonus = function( level, salary ){ return strategies[ level ]( salary ); }; console.log( calculateBonus( 'S', 20000 ) ); // 输出：80000 console.log( calculateBonus( 'A', 10000 ) ); // 输出：30000
应用1： 缓动动画
先创建一个div当作小球
<body> <div style="position:absolute;background:blue" id="div">我是div</div> </body>
接下来定义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 ); };
其中， getBoundingClientRect()用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。 函数无参数。
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 属性值 };
在这段代码中，(1)处的意思是，如果当前时间大于动画开始时间加上动画持续时间之和，说
明动画已经结束，此时要修正小球的位置。因为在这一帧开始之后，小球的位置已经接近了目标
位置，但很可能不完全等于目标位置。此时我们要主动修正小球的当前位置为最终的目标位置。
此外让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' ); // animate.start( 'top', 1500, 500, 'strongEaseIn' );
通过这段代码，可以看到小球按照我们的期望以各种各样的缓动算法在页面中运动。
应用2： 表单校验
首先，封装校验规则
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 对象。在给出Validator 类的代码之前，有必要提前了解用户是如何向Validator类发送请求的，这有助于我们知道如何去编写Validator 类的代码。代码如下：
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; } } }
使用：
validator.add( registerForm.userName, 'isNonEmpty', '用户名不能为空' );
以上是每种情况下只有一个校验规则，如果一个文本框的校验规则多于一个，其实现方式如下：
<html> <body> <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 位' }]); 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; } }; </script> </body> </html>
