第五章 策略模式
在程序设计中，要实现某一个功能有多种方案可以选择。
比如一个压缩文件的程序，既可以选择 zip 算法，也可以选择 gzip 算法。
策略模式的定义是：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。
5.1 使用策略模式计算奖金
很多公司的年终奖是根据员工的工资基数和年底绩效情况来发放的。
例如，绩效为 S 的人年终奖有 4 倍工资，绩效为 A 的人年终奖有 3 倍工资，而绩效为 B 的人年终奖是 2 倍工资。
如果用策略模式来实现这个年终奖计算：
// 一组策略类
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;
};
// 环境类 Context
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
一个基于策略模式的程序，至少由两部分组成：
-
第一个部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程。
-
第二个部分是环境类
Context,Context接受客户的请求，随后把请求委托给某一个策略类。
要做到这点，说明
Context中要维持对某个策略对象的引用。
5.2 JavaScript 版本的策略模式
在 5.1 中的做法是模拟传统面向对象语言的实现。
但在 JavaScript 中，函数本身就是对象。
所以我们可以采用更简单直接的写法：
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
5.3 多态在策略模式中的体现
通过使用策略模式，我们消除了原程序中大片的条件分支语句。
当我们对这些策略对象发出“计算奖金”的请求时，它们会返回各自不同的计算结果，这正是对象多态性的体现，也是“它们可以相互替换”的目的。
5.4 实现缓动动画
在 JavaScript 中，可以通过连续改变元素的某个 CSS 属性来实现动画效果。
16.67 毫秒循环一次，即 60 帧每秒（1000ms/60 = 16.67ms），也称为 60FPS。
使用
requestAnimationFrame来制作的动画更好。 原因是其会为动画提供了更高的优先级，并会在最佳时间运行，以匹配显示的刷新率。
5.5 更广义的算法
从定义上看，策略模式就是用来封装算法的。
但在实际开发中，我们通常会把算法的含义扩散开来，使策略模式也可以用来封装一系列的“业务规则”。
只要这些业务规则指向的目标一致，并且可以被替换使用，我们就可以用策略模式来封装它们。
5.6 表单校验
<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 = [];
};
// add 方法允许用户为一个 DOM 元素添加一组验证规则，
// 并将这些验证规则转化为验证函数，
// 这些函数最后会被存储在 this.cache 中，等待后续验证调用。
Validator.prototype.add = function( dom, rules ){
var self = this;
for ( var i = 0, rule; rule = rules[ i++ ]; ){
// 这里使用 IIFE 的目的是，为每个规则创建一个新的作用域，这样每个规则都可以在其自己的作用域内操作，而不会影响其他规则。
(function( rule ){
var strategyAry = rule.strategy.split( ':' );
var errorMsg = rule.errorMsg;
// 向 self.cache (即 this.cache) 里添加新的验证函数
self.cache.push(function(){
var strategy = strategyAry.shift();
strategyAry.unshift( dom.value );
strategyAry.push( errorMsg );
return strategies[ strategy ].apply( dom, strategyAry );
});
})( rule )
}
};
// 此 start 方法会遍历 cache 数组中的所有验证函数。
// 它依次执行每一个验证函数，并检查返回的结果。
// 如果任何验证函数返回一个错误消息，方法会立即返回这个错误消息。
Validator.prototype.start = function(){
// 循环的条件是将 this.cache[i] 赋值给 validatorFunc，
// 只要这个值是真实的（即非 null、非 undefined、非 false、非 0 等），循环就会继续。
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.7 策略模式的优缺点
优点：
-
策略模式通过组合、委托和多态避免多重条件选择。
-
它完美支持开放—封闭原则，使算法易于切换和扩展。(算法被封装在独立的 strategy 中)
-
模式中的算法可在系统其他部分复用，减少重复代码。
-
利用组合和委托，使 Context 执行算法，为轻便的继承替代方案。
一点小缺点：
-
使用策略模式会在程序中增加许多策略类或者策略对象，但实际上这比把它们负责的逻辑堆砌在 Context 中要好。
-
要使用策略模式，必须了解所有的 strategy，必须了解各个 strategy 之间的不同点，这样才能选择一个合适的 strategy。
5.8 一等函数对象和策略模式
Peter Norvig 在他的演讲中曾说过：“在函数作为一等对象的语言中，策略模式是隐形的。strategy 就是值为函数的变量。”
在 JavaScript 语言的策略模式中，策 略类往往被函数所代替，这时策略模式就成为一种“隐形”的模式。