1. 定义
策略模式：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。
2. 使用策略模式计算奖金
策略模式有着广泛的应用。以年终奖的计算为例进行介绍。例如，绩效为S的人年终奖有4倍工资，绩效为A的人年终奖有3倍工资，而绩效为B的人年终奖是2倍工资。提供一段代码，来计算员工的年终奖。
2.1 最初的代码实现
编写一个名为 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
这段代码十分简单，但是存在着显而易见的缺点。
-
calculateBonus 函数十分庞大，包含了很多 if-else 语句，这些语句需要覆盖所有的逻辑分支。
-
calculateBonus 函数缺乏弹性，如果增加了一种新的绩效等级C，或者想把绩效S的奖金系数改为5，那我们必须深入 calculateBonus 函数的内部实现，这是违反开放-封闭原则的。
-
算法的复用性差，如果在程序的其他地方需要重用这些计算奖金的算法呢？我们的选择只有复制和粘贴。
2.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 函数有可能越来越大，而且在系统变化的时候缺乏弹性。
2.3 使用策略模式重构代码
策略模式指的是定义一系列的算法，把它们一个个封装起来。将不变的部分和变化的部分隔开是每个设计模式的主题，策略模式也不例外，策略模式的目的就是将算法的使用与算法的实现分离开来。
在这个例子里，算法的使用方式是不变的，都是根据某个算法取得计算后的奖金数额。而算法的实现是各异和变化的，每种绩效对应着不同的计算规则。
一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程。第二个部分是环境类Content， Content 接受客户的请求，随后把请求委托给某一个策略类。要做到这点，说明Content中要维持对某个策略对象的引用。
现在用策略模式来重构上面的代码。第一个版本是模仿传统面向对象语言中的实现。先把每种绩效的计算规则都封装在对应的策略类里面：
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(){ //取得奖金数额
if(!this.strategy) {
throw new Error('未设置strategy属性')
}
return this.strategy.calculate(this.salary) //把计算奖金的操作委托给对应的策略对象
}
在完成最终的代码之前，回顾下策略模式的思想：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。
这句话如果说得更详细一点，就是： 定义一些列的算法，把它们各自封装成策略类，算法被封装在策略类内部的方法里。在客户对Context发起请求的时候，Context总是把请求委托给这些策略对象中间的某一个进行计算。
现在我们来完成这个例子中剩下的代码。先创建一个bonus对象，并且给bonus对象设置一些原始的数据，比如员工的原始工资数额。接下来把某个计算奖金的策略对象也传入bonus对象内部保存起来。当调用bonus.getBonus()来计算奖金的时候，bonus对象本身并没有能力进行计算，而是把请求委托给了之前保存好的策略对象：
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
通过策略模式重构之后，代码变得更加清晰，各个类的职责更加鲜明。但这段代码是基于传统面向对象语言的模仿。
3.JavaScript 版本的策略模式
在前面的例子中，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
4. 多态在策略模式中的体现
通过使用策略模式重构代码，我们消除了原程序中大片的条件分支语句。所有跟计算奖金有关的逻辑不再放在Context中，而是分布在各个策略对象中。Context并没有计算奖金的能力，而是把这个职责委托给了某个策略对象。每个策略对象负责的算法已被各自封装在对象内部。当我们对这些策略对象发出“计算奖金”的请求时，它们会返回各自不同的计算结果，这正是对象多态性的体现，也是“它们可以互相替换”的目的。替换Context中当前保存的策略对象，便能执行不同的算法来得到我们想要的结果。
5. 使用策略模式实现缓动动画
5.1 实现动画效果的原理
把一些差距不大的原画以较快的帧数播放，来达到视觉上的动画效果。在JavaScript中，可以通过连续改变元素的某个CSS属性，比如：left、top、background-position来实现动画效果。
5.2 思路和一些准备工作
目标： 编写一个动画类和一些缓动算法，让小球以各种各样的缓动效果在页面中运动。
思路：运动开始之前，需要的信息：
- 动画开始时，小球所在的原始位置；
- 小球移动的目标位置
- 动画开始时的准确时间点
- 小球运动持续的时间
通过 setInterval 创建一个定时器，定时器每隔19ms循环一次。在定时器的每一帧里，把动画已消耗的时间、小球原始位置、小球目标位置和动画持续的总时间等信息传入缓动算法。该算法会通过这几个参数，计算出小球当前应该所在的位置。最后再更新该div对应的CSS属性， 小球就能顺利地运动起来了。
5.3 让小球运动起来
缓动算法： 接受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:
<body>
<div style="position:absolute;background:blue" id="div">
我是div
</div>
</body>
接下来定义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) {
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');
6. 更广义的“算法”
策略模式指的是定义一系列的算法，并且把它们封装起来。前面介绍的计算奖金和缓动动画的例子都封装了一些算法。
从定义上看，策略模式就是用来封装算法的。但如果把策略模式仅仅用来封装算法，未免有些大材小用。在实际开发中，通常会把算法的含义扩散开来，使策略模式也可以用来封装一些列的“业务规则”。只要这些业务规则指向的目标一致，并且可以被替换使用，就可以用策略模式来封装它们。
7. 表单校验
使用策略模式来完成表单校验
校验逻辑
- 用户名不能为空
- 密码长度不能少于6位
- 手机号码必须符合格式
7.1 表单校验的第一个版本
没有引入策略模式
<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 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>
</body>
</html>
这是一种很常见的编码格式，它的缺点跟计算奖金的最初版本一摸一样。
- registerForm.onsubmit 函数比较庞大，包含了很多if-else语句，这些语句需要覆盖所有的校验规则
- registerForm.onsubmit函数缺乏弹性，如果增加了一种新的校验规则，或者想把密码的长度校验从6改成8， 都必须深入registerForm.onsubmit函数的内部实现，这是违法开放-封闭原则的
- 算法的复用性差，如果在程序中增加了另外一个表单，这个表单也需要进行一些类似的校验，那我们可能将这些校验逻辑复制得漫天遍野。
7.2 用策略模式重构表单校验
第一步：把校验逻辑都封装成策略对象：
var strategies = {
isNonEmpty: function(val, 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类发送请求的：
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位');
7.3 给某个文件输入框添加多种校验规则
<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(val, 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: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;
}
registerForm.onsubmit = function(){
var errorMsg = validataFunc();
if (errorMsg) {
alert(errorMsg)
return false;
}
}
</script>
</body>
</html>
5.8 策略模式的优缺点
优点：
- 策略模式利用组合、委托和多态等技术和思想，可以有效地避免多重条件选择语句
- 策略模式提供了对开放-封闭原则的完美支持，将算法封装在独立的strategy中，使得它们易于切换，易于理解，易于扩展
- 策略模式中的算法也可以复用在系统的其他地方，从而避免许多重复的复制粘贴工作
- 在策略模式中利用组合和委托来让Context拥有执行算法的能力，这也是继承的一种更轻便的替代方案
缺点：
-
使用策略模式会在程序中增加许多策略类或者策略对象，但实际上这比把它们负责的逻辑堆砌在Context中要好
-
使用策略模式，必须了解所有的strategy, 必须了解各个strategy之间的不同点，这样才能选择一个合适的 strategy 。比如， 我们要选择一种合适的旅游出行路线，必须先了解选择飞机、火车、自行车等方案的细节。此时strategy要向客户暴露它的所有实现，这时违反最少知识原则的。
5.9 一等函数对象与策略模式
前面的几个策略模式示例，既有模拟传统面向对象语言的版本，也有针对JavaScript语言的特有实现。在以类为中心的传统面向对象语言中，不同的算法或者行为被封装在各个策略类中,Context将请求委托给这些策略对象，这些策略对象会根据请求返回不同的执行结果，这样便能表现出对象的多态性
在函数作为一等对象的语言中，策略模式是隐形的。strategy就是值为函数的变量。在JavaScript中，除了使用类来封装算法和行为之外，使用函数当然也是一种选择。这些”算法“可以被封装到函数中并且四处传递，也就是我常说的”高阶函数“。实际上在JavaScript这种将函数作为一等对象的语言里，策略模式已经融入到了语言本身当中，我们经常用高阶函数来封装不同的行为，并且把它传递到另一个函数中。当我们对这些函数发出“调用”的信息时，不同的函数会返回不同的执行结果。在JavaScript中，“函数对象的多态性”来得更加简单。
在JavaScript中， 策略类往往被函数所代替，这时策略模式就成为一种“隐形”的模式。
