JS设计模式-策略模式

一个根据等级计算奖金的例子。

var stratagies = {
"S": function (salary) {
return salary*4;
},
"A": function (salary) {
return salary*3;
},
"B": function (salary) {
return salary*2;
}
};
var calculateBonus = function (level, salary) {
return stratagies[level](salary);

};

console.log(calculateBonus('S', 20000));
console.log(calculateBonus('A', 10000));

所有跟计算奖金有关的逻辑不再放在context中，而是分布在各个策略对象中。Context并没有计算将近的能力，而是把这个职责委托给了某个策略对象。每个策略对象负责的算法已被封装在对象内部。当我们对这些策略对象发出“计算奖金”的请求时，他们会返回各自不同的计算结果，这正是对象多态性的体现。

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

思路和一些准备工作：

我们目标编写一个动画类和一些缓动算法，让小球以各种各样的缓动效果在页面中运动。

在运动之前，需要记录一些有用的信息，至少包括：动画开始时，小球所在的原始位置；小球移动的目标位置；动画开始时的准确时间点；运动持续的时间。

随后，我们会用setInterval创建一个定时器。在定时器的每一帧里，我们会把动画已消耗的时间、小球的原始位置、目标位置和动画持续的总时间等信息传入缓动算法。该算法会通过这几个参数，计算出小球当前应该所在的位置。最后再更新该div对应的css属性，小球就能顺利的运动起来了。

让小球运动起来：

在实现完整的功能前，我们先了解一些常见的缓动算法。这些算法都接受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;
}
};

现在我们开始编写完整的代码，下面代码的思想来自jq库，由于目的是演示策略模式，而非编写一个完整的动画库，因此省去了动画队列控制等更多完整功能。

首先在页面中放置一个div：

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

接下来定义Animate类，Animate的构造函数接受一个参数：即将运动起来的dom节点。

var Animate = function (dom) {
this.dom = dom;             // 进行运动的dom节点
this.startTime = 0;         // 开始时间
this.startPos = 0;          // dom的初始位置
this.endPos = 0;            // 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];
this.propertyName = propertyName;
this.endPos = endPos;
this.duration = duration;
this.easing = tween[easing];

var self = this;
var timeId = setInterval(function () {  // 起启动定时器，开始执行动画
if (self.step() === false) {         // 如果动画已结束，则清楚定时器
clearInterval(timeId);
}
}, 19);
};

再接下来是Animate.prototype.step方法，该方法代表小球运动的每一帧要做的事情。在此处，这个方法负责计算小球的当前位置和调用更新css属性值的方法Animate.prototype.update.

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属性
};

最后是负责更新小球的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');

通过这段代码，可以看到小球按照我们的期望以各种各样的缓动算法在页面中运动。我们使用策略模式把算法传入动画类，来达到各种不同的缓动效果，这些算法都可以轻易被替换为另一个算法，这是策略模式的经典应用之一。

从定义上看，策咯模式就是用来封装算法的。在实际开发中，我们通常会把算法的含义扩散开来，使策略模式也可以用来封装一系列的“业务规则”。只要这些业务规则指向的目标一致，并且可以被替换使用，我们就可以用可以用策略模式来封装它们。

表单验证
假设我们要编写一个注册的页面，有如下几条校验逻辑。

1.用户名不能为空

2.密码长度不能少于6位

3.手机号码必须符合格式

表单校验的第一个版本：

此处没有引入策略模式。

<form id="registerForm" method="post" action="">
请输入用户名： <input type="text" name="userName"/>
请输入密码： <input type="text" name="password"/>
请输入手机号码： <input type="text" name="phoneNumber"/>
</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>

这是一种很常见的编码方式，缺点如下：

1.registerForm.onsubmit函数比较庞大，包含了很多分支语句，这些语句需要覆盖所有的校验规则

2.registerForm.onsubmit缺乏弹性

3.算法的复用性差

用策略模式重构表单校验
下面用策略模式来重构表单校验的代码，很显然第一步要把这些校验逻辑都封装成策略对象：

var strategies = {
inNotEmpty: 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, 'inNotEmpty', '用户名不能为空');
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类的实现：

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, [{
strategy: 'inNotEmpty',
errorMsg: '用户名不能为空'
},{
strategy: 'minLength:10',
errorMsg: '长度不能小于10'
}]);

下面提供的代码可用于一个文本输入框对应多种检验规则：

<form id="registerForm" method="post" action="">
请输入用户名： <input type="text" name="userName"/>
请输入密码： <input type="text" name="password"/>
请输入手机号码： <input type="text" name="phoneNumber"/>
<button>提交</button>
</form>
<script>
/*************************策略对象**************************/
var strategies = {
inNotEmpty: 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 msg = validatorFunc();  // 开始校验，并取得校验后的返回信息
if (msg) {
return msg;
}
}
};

/*************************客户调用代码************************/
var validataFunc = function () {
var validator = new Validator();  //创建一个validator对象

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

validator.add(registerForm.password, [{
strategy: 'minLength:6',
errorMsg: '密码长度不能小于6'
}]);

validator.add(registerForm.phoneNumber, [{
strategy: 'isMobile',
errorMsg: '手机号码格式不正确'
}]);

var errorMsg = validator.start(); // 获得校验结果
return errorMsg;
};

var registerForm = document.getElementById('registerForm');
registerForm.onsubmit = function () {
var errorMsg = validataFunc();
if (errorMsg) {
alert(errorMsg);
return false;
}
};
</script>