策略模式
在程序设计中，我们要实现一个功能有很多种方法可以选择，例如，一个压缩文件的程序，既可以选择zip算法，也可以选择gzip算法。
这些算法灵活多样，而且可以随意互相替换。这种解决方案就是策略模式。
策略模式的定义是定义一系列算法，把它们一个个封装起来，并且使它们可以相互替换
一、使用策略模式计算奖金
很多公司的年终奖是根据员工的工资基数和年底绩效情况来发放的。
例如，绩效为S的人年终奖有4倍工资，绩效为A的人年终奖有3倍工资，而绩效为B的人年终奖是2倍工资。假设财务部要求我们提供一段代码，来方便它们计算员工的年终奖
1、最初的代码实现
var calcuateBonus = function(level, salary){
if(level === "S"){
return salary * 4
}
if(level === "A"){
return salary * 3
}
if(level === "B"){
return salary * 2
}
}
calcuateBonus("A", 2000) // 6000
calcuateBonus("S", 6000) // 24000
这段代码的实现非常简单，但存在着显而易见的缺点
- calcuateBonus 函数比较庞大，包含了很多的if-else语句，这些语句需要覆盖所有的逻辑分支。
- calcuateBonus 函数缺乏弹性，如果增加了一种新的绩效等级C,或者想把绩效S的奖金系统改为5，那我们必须深入calcuateBonus 函数的内部实现，这是违反开放-封闭原则的。
- 算法的复用性差，如果在程序的其他地方需要重用这些计算奖金的算法呢？我们的选择只有复制和粘贴
因此我们需要重构这段代码
2、使用组合函数重构代码
一般最容易想到的办法就是使用组合函数来重构代码，我们把各种算法封装到一个个的小函数里面，这些小函数有着良好的命名，可以一目了然的知道它对应着那种算法，它们也可以被复用在程序的其他地方。
var performaceS = function(salary){
return salary * 4
}
var performaceA = function(salary){
return salary * 3
}
var performaceB = function(salary){
return salary * 2
}
var calcuateBonus = function(level, salary){
if(level === "S"){
return performaceS(salary)
}
if(level === "A"){
return performaceA(salary)
}
if(level === "B"){
return performaceB(salary)
}
}
calcuateBonus("A", 2000) // 6000
目前，我们的程序得到了一定的改善，但这种改善非常有限，我们依然没有解决最重要的问题：calculateBonus函数有可能越来越庞大，而且在系统变化的时候缺乏弹性
3、使用策略模式重构代码
策略模式指的是定义一系列的算法，把他们一个个封装起来。将不变的部分和变化的部分隔开是每个设计模式的主题，策略模式也不意外，策略模式的目的就是将算法的使用与算法的实现分离开来。
在这个例子中里，算法的使用方式是不变的，都是根据某个算法取得计算后的奖金数额。而算法的实现是各异和变化的，每种绩效对应着不同的计算规则
一个基于策略模式的程序至少由两部分组成。
- 策略类：封装了具体的算法，并负责具体的计算过程
- 环境类context：context接受客户的请求，随后把请求委托给一个策略类。
要做到这点，说明 Context 中要维持对某个策略对象的引用。
现在用策略模式来重构上面的代码，第一个版本是模仿传统面向对象语言中的实现。我们先把每种绩效的计算规则都封装在对应的策略类里面：
var levelS = function(){}
levelS.prototype.calculate = function(salary){
return salary*4
}
var levelA = function(){}
levelA.prototype.calculate = function(salary){
return salary*3
}
var levelB = function(){}
levelB.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(1000);
bonus.setStrategy(new levelS());
console.log(bonus.getBonus()); // 4000
bonus.setStrategy(new levelA());
console.log(bonus.getBonus()); // 3000
通过策略模式重构之后，代码变得更加清晰，各个类的职责更加鲜明，但这段代码是基于传统面向对象语言的模仿，下面我们来了解下用JavaScript实现的策略模式
二、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 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', 1000)) // 4000
console.log(calculateBonus('A', 1000)) // 3000
三、多态在策略模式中的体现
通过使用策略模式重构代码，我们消除来原程序中大片的条件分支语句。所有跟计算奖金有关的逻辑不再放在Context中，而是分布在各个策略对象中。Context 并没有计算奖金的能力，而是把这个职责委托给了某个策略对象。每个策略对象负责的算法已被各自封装在对象内部。当我们对这些策略对象发出“计算奖金”的请求时，它们会返回各自不同的计算结果，这正式对象多态的体现，也是“它们可以相互替换”的目的。替换Context中当前保存的策略对象，便能执行不同的算法来得到我们想要的结果。
四、更广义的“算法”
策略模式指的是定义一系列的算法，并且把它们封装起来。
从定义上看，策略模式就是用来封装算法的。但如果把策略模式仅仅用来封装算法，未免有些大材小用。在实际开发中，我们通常会把算法的含义扩散开来，使策略模式也可以用来封装一系列的“业务规则”。只要这些业务规则执行的目标一致，并且可以被替换使用，我们就可以用策略模式来封装它们。
五、表单验证
在web开发中，表单验证是一个常见的话题。 注册、登陆、修改用户信息等功能的实现都离不开提交表单。
在将用户输入的数据提交给后台之前，常常要做一些客户端力所能及的校验工作，比如注册的时候需要验证是否填写来用户名，密码的长度是否符合规定，等等。这样可以避免因为提交不合法数据而带来的不必要的网络开销。
假设我们正在编写一个注册的页面，在点击注册按钮之前，有以下几条校验逻辑：
- 用户名不能为空
- 密码长度不能少于6位
- 手机号码必须符合格式。
话不多说，接下来我们用策略模式来实现表单校验
第一步、我们要把这些校验逻辑都封装成策略对象
var strategies = {
isNonEmpit: function(value, errorMsg){
if(value === ""){
return errorMsg
}
},
minLength: function(value,length,errorMsg){
if(value.length < length){
return errorMsg
}
},
isMobile: function(value, errorMsg){
if(!/1[0-9]{10}$/.test(value)){
return errorMsg
}
}
};
第二步、实现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('register');
registerForm.onsubmit = function(){
var errorMsg = validatorFunc();
if(errorMsg){
alert(errorMsg);
return false;
}
}
从这段代码可以看到，我们先创建了一个validator对象，然后通过validator.add方法，往validator对象中添加了一些校验规则。validator.add方法接收三个参数：
validator.add(registerForm.password, "minLength:6", "密码长度不能少于6位");
- registerForm.password 为参与校验的input输入框
- "minLength:6" 是一个以“:”隔开的字符串。冒号前面的minLength代表客户挑选的strategy对象，冒号后面的数字6 表示在校验过程中所必须的一些参数。如果这个字符串中不包含冒号，说明校验过程中不需要额外的参数信息，比如"isNonEmpty".
- 第三个参数是当校验未通过时返回的错误信息
当我们往validator对象里添加完一系列的校验规则之后，会调用validator.start()方法来启动校验，如果validator.start()返回来一个确切的errorMsg字符串当作返回值，说明该次校验没有通过，此时需让registerForm.onsumbit方法返回false来阻止表单的提交。
第三步、 Validator 类的实现
var Validator = function(){
this.cache = []; //保存校验规则
}
Validator.prototype.add = function(dom, rules){
var ary = rule.strategy.split(':'); // 把strategy和参数分开
this.cache.push(function(){ // 把校验的步骤用空函数包装起来，并且放入cache
var strategy = ary.shift();
ary.unshift(dom.value);
ary.push(errorMsg)
return strategies[strategy].apply(dom, ary)
});
}
Validator.prototype.start = function(){
for(var i = 0, validatorFunc; validatorFunc = this.cache[i++];){
var errorMsg = validatorFunc();
if(errorMsg){
return errorMsg;
}
}
}
使用策略模式编写代码之后，我们仅仅通过“配置”的方式就可以完成一个表单的校验，这些校验规则也可以复用在程序的任何地方，还能作为插件的形式，方便地被移植到其他项目中。
在修改某个校验规则的时候，只需要编写或者改写少量的代码。比如我们想将用户名输入框的校验规则改成用户名不能少于10个字符。
只需要：
validator.add(registerForm.userName, "isNonEmpty", "用户名不能为空");
改成
validator.add(registerForm.userName, "minLength:10", "用户名长度不能少于10位");
给某个输入框添加多种校验规则
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form action="http://XX.com/register" id="register" method="post">
请输入用户名：<input type="text" name="userName"/>
请输入密码： <input type="password" name="password"/>
请输入手机号: <input type="tel" name="phoneNumber"/>
<button>提交</button>
</form>
<script type="text/javascript">
/***************************策略对象****************************/
var strategies = {
isNonEmpit: function(value, errorMsg){
if(value === ""){
return errorMsg
}
},
minLength: function(value,length,errorMsg){
if(value.length < length){
return errorMsg
}
},
isMobile: function(value, errorMsg){
if(!/1[0-9]{10}$/.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('register');
var validatorFunc = function(){
var validator = new Validator();
validator.add(registerForm.userName,[{
strategy: "isNonEmpit",
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(){
debugger;
var errorMsg = validatorFunc();
if(errorMsg){
alert(errorMsg);
return false;
}
}
</script>
</body>
</html>
六、策略模式的优缺点
策略模式是一种常用且有效的设计模式，本章提供了计算奖金、表单验证的例子来加深对策略模式的理解。从这些例子中也可以总结出策略模式的一些优点
- 策略模式利用组合、委托和多态等技术和思想，可以有效地避免多重条件选择语句
- 策略模式提供了对 开放-封闭 原则的完美支持，将算法封装在独立的strategy中，使得它们易于切换，易于理解，易于扩展。
- 策略模式中的算法也可以复用在系统的其他地方，从而避免许多重复的复制粘贴工作
- 在策略模式中利用组合和委托来让Context拥有执行算法的能力，这也是继承的一种更轻便的替代方案
当然策略模式也有一些缺点，但是这些缺点并不严重
首先，使用策略模式会在程序中增加许多策略类或者策略对象，但实际上这比把它们负责的逻辑堆砌在Context中要好。
其次，要使用策略模式，必须了解所有的strategy，必须了解各个strategy之间的不同点，这样才能选择一个合适的strategy。
七、一等函数对象与策略模式
在以类为中心的传统面向对象语言中，不同的算法或者行为被封装在各个策略类中，Context将请求委托给这些策略对象，这些策略对象会根据请求返回不同的执行结果，这样便能表现出对象的多态性。
Peter Norvig 在他的演讲中曾说过：“在函数作为一等对象的语言中，策略模式是隐形的。strategy就是值为函数的变量。” 在JavaScript中，除了使用类来封装算法和行为之外，使用函数当然也是一种选择。这些“算法”可以被封装到函数中并且四处传递，也就是我们常说的“高阶函数”。实际上在JavaScript这种将函数作为一等对象的语言里，策略模式已经融入到了语言本身当中，我们经常用高阶函数来封装不同的行为，并且把它传递到另一个函数中。当我们对这些函数发出“调用”的消息时，不同的函数会返回不同的执行结果。在JavaScript中，“函数对象的多态性”来得更加简单。
八、小结
在JavaScript语言的策略模式中，策略类往往被函数所替代，这时策略模式就成为一种“隐形”的模式。尽管这样，从头到尾的了解策略模式，不仅可以让我么对该模式有更加透彻的了解，也可以使我们明白使用函数的好处。
