策略模式指的是定义一些列的算法，把他们一个个封装起来，目的就是将算法的使用与算法的实现分离开来。
以策略模式的思路实现上边例子的效果的js代码:
1. 首先封装移动节点的缓动算法
/*
* 缓动算法: 接收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;
}
};
2. HTML 部分
<div style="position: relative;border: 1px solid #ff0000; width: 560px;min-height: 30px">
<div style="position:absolute;background:rgba(0,0,255,.3);width: 60px;line-height: 30px;" id="div">我是 div</div>
</div>
<div>
<label><input type="radio" name="tween" value="linear" checked="checked">linear</label>
<label><input type="radio" name="tween" value="easeIn">easeIn</label>
<label><input type="radio" name="tween" value="strongEaseIn">strongEaseIn</label>
<label><input type="radio" name="tween" value="strongEaseOut">strongEaseOut</label>
<label><input type="radio" name="tween" value="sineaseIn">sineaseIn</label>
<label><input type="radio" name="tween" value="sineaseOut">sineaseOut</label><br/>
<input type="button" id="btnRun" value="run">
</div>
3. 定义一个构造函数接收一个参数:即将运动起来的dom节点
/*
* Animate 的构造函数接收一个参数：即将运动起来的 dom 节点。
*/
var Animate = function( dom ){
this.dom = dom; // 进行运动的 dom 节点
this.startTime = 0; // 动画开始时间
this.startPos = 0; // 动画开始时， dom 节点的位置，即 dom 的初始位置
this.endPos = 0; //
this.propertyName = null; // dom 节点需要被改变的 css 属性名
this.easing = null; // 缓动算法
this.duration = null; // 动画持续时间
};
4. 启动方法，负责启动这个动画
/*
* 负责启动运动动画
*/
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);
}
},20);
};
5. 动画定时器运行的步骤，setp方法，节点运动的每一帧要做的事情
/*
* step 表示节点运动的每一帧要做的事情。 负责计算节点的当前位置和调整更新 CSS 属性值
*/
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 属性
};
6. 更新节点的CSS属性值
/*
* 负责更新节点 CSS 属性值
*/
Animate.prototype.update = function(pos){
this.dom.style[ this.propertyName ] = pos + "px";
};
7. 测试运行
/*
* 创建要运动的节点
*/
var div = document.getElementById("div");
var animate = new Animate(div);
// 设置运行事件
var btnRun = document.getElementById("btnRun");
var radios = document.getElementsByName("tween"); // 获取单选框
btnRun.onclick = function(){
for(var i= 0,lengh=radios.length;i<lengh;i++){
// 查找被选中要执行的算法策略
if(radios[i].checked){
animate.reset(); // 重置节点运动属性
// 设置动画的基本属性
animate.start( "left", 500, 1000, radios[i].value);
break;
}
}
};
8. 重置节点的CSS属性为0，reset()方法
Animate.prototype.reset = function(){
// 重置为 0
this.dom.style[this.propertyName] = "0px";
};
策略模式总结:
策略模式的优点:
1. 策略模式利用组合、委托和多态等技术和思想，可以有效地避免多重条件选择语句
2. 策略模式提供了对开放-封闭原则的完美支持，将算法封装在独立的 strategy 中，使得它们易于切换，易于理解，易于扩展
策略模式的缺点:
1. 会在程序中增加许多策略类或者策略对象，但实际上比把他们负责的逻辑堆砌在 Context 中要好
2. 使用策略模式，必须了解所有的策略，才能更好的选择一个合适的策略
深入理解JavaScript设计模式之策略模式
在理解策略模式之前，我们先来一个例子，一般情况下，如果我们要做数据合法性验证，很多时候都是按照swith语句来判断，但是这就带来几个问题，首先如果增加需求的话，我们还要再次修改这段代码以增加逻辑，而且在进行单元测试的时候也会越来越复杂，代码如下：
validator = {
validate: function (value, type) {
switch (type) {
case 'isNonEmpty ':
{
return true; // NonEmpty 验证结果
}
case 'isNumber ':
{
return true; // Number 验证结果
break;
}
case 'isAlphaNum ':
{
return true; // AlphaNum 验证结果
}
default:
{
return true;
}
}
}
};
// 测试
alert(validator.validate("123", "isNonEmpty"));
那如何来避免上述代码中的问题呢，根据策略模式，我们可以将相同的工作代码单独封装成不同的类，然后通过统一的策略处理类来处理，OK，我们先来定义策略处理类，代码如下：
var validator = {
// 所有可以的验证规则处理类存放的地方，后面会单独定义
types: {},
// 验证类型所对应的错误消息
messages: [],
// 当然需要使用的验证类型
config: {},
// 暴露的公开验证方法
// 传入的参数是 key => value对
validate: function (data) {
var i, msg, type, checker, result_ok;
// 清空所有的错误信息
this.messages = [];
for (i in data) {
if (data.hasOwnProperty(i)) {
type = this.config[i]; // 根据key查询是否有存在的验证规则
checker = this.types[type]; // 获取验证规则的验证类
if (!type) {
continue; // 如果验证规则不存在，则不处理
}
if (!checker) { // 如果验证规则类不存在，抛出异常
throw {
name: "ValidationError",
message: "No handler to validate type " + type
};
}
result_ok = checker.validate(data[i]); // 使用查到到的单个验证类进行验证
if (!result_ok) {
msg = "Invalid value for *" + i + "*, " + checker.instructions;
this.messages.push(msg);
}
}
}
return this.hasErrors();
},
// helper
hasErrors: function () {
return this.messages.length !== 0;
}
};
然后剩下的工作，就是定义types里存放的各种验证类了，我们这里只举几个例子：
// 验证给定的值是否不为空
validator.types.isNonEmpty = {
validate: function (value) {
return value !== "";
},
instructions: "传入的值不能为空"
};
// 验证给定的值是否是数字
validator.types.isNumber = {
validate: function (value) {
return !isNaN(value);
},
instructions: "传入的值只能是合法的数字，例如：1, 3.14 or 2010"
};
// 验证给定的值是否只是字母或数字
validator.types.isAlphaNum = {
validate: function (value) {
return !/[^a-z0-9]/i.test(value);
},
instructions: "传入的值只能保护字母和数字，不能包含特殊字符"
};
使用的时候，我们首先要定义需要验证的数据集合，然后还需要定义每种数据需要验证的规则类型，代码如下：
var data = {
first_name: "Tom",
last_name: "Xu",
age: "unknown",
username: "TomXu"
};
validator.config = {
first_name: 'isNonEmpty',
age: 'isNumber',
username: 'isAlphaNum'
};
最后，获取验证结果的代码就简单了：
validator.validate(data);
if (validator.hasErrors()) {
console.log(validator.messages.join("\n"));
}
总结
策略模式定义了一系列算法，从概念上来说，所有的这些算法都是做相同的事情，只是实现不同，他可以以相同的方式调用所有的方法，减少了各种算法类与使用算法类之间的耦合。
从另外一个层面上来说，单独定义算法类，也方便了单元测试，因为可以通过自己的算法进行单独测试。
实践中，不仅可以封装算法，也可以用来封装几乎任何类型的规则，是要在分析过程中需要在不同时间应用不同的业务规则，就可以考虑是要策略模式来处理各种变化。