第5章策略模式

在程序设计中我们往往会遇到实现某一功能有多种方案可以选择。比如一个压缩算法，我们可以选择zip算法，也可以选择gzip算法。

这些算法灵活多样，而且可以随意互相替换。这种解决方案就是本章要讨论的策略模式。

定义：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。

5.1 使用策略模式计算奖金

1. 最初的代码实现

我们可以编写一个名为calculateBonus的函数来计算每个人的奖金额。很显然，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);
calculateBonus(‘C’,6000);

可以看出代码十分简单，但是也存在着显而易见的缺点。

l if-else分支多，这些分支要覆盖所有的逻辑

l calculateBonus函数缺乏弹性，如果增加了一种新的绩效等级C，或是把绩效S的奖金系数改为5，那么我们必须深入calculateBonus函数的内部实现，这违反开放—封闭原则

l 算法的复用性差，如果在程序的其他地方需要重用这些计算奖金的算法呢？我们只有复制和粘贴。

2. 使用组合函数重构代码

一般容易想到的办法就是使用组合函数来重构代码，我们把各种算法封闭到一个小函数里面，这些小函数有着良好的全名，可能一目了然地知道它对应着哪咱算法，它们也可以被利用在程序的其他地方:

var performanceS= function(salary){return salary*4;
}
var performanceA= function(salary){return salary*3;
}
var performanceB= function(salary){return salary*2;
}
varcalculateBonus = function(performanceLevel,salary){if(performanceLevel==”S”){return performanceS(salary);}if(performanceLevel==”A”){return performanceA(salary);}if(performanceLevel==”B”){return performanceB(salary);}
}
calculateBonus(‘A’,10000);

目前，我们的程序得到了一定的改善，但这种改善非常有限，我们依然没有解决最重要的问题：calculateBonus函数有可能越来越庞大，而且在系统变化的时候缺乏弹性。

3. 使用策略模式重构代码

策略模式是指定义一系列的算法，把它们一个个封装起来。将不变的部分和变化的部分分隔开是每个设计模式的主题:

策略模式的目的就是将算法的使用与算法的实现分离开来。

在上面的例子里，算法的使用方式是不变的，都是根据某个算法取得计算后资金数额。而算法的实现是各异和变化的，每种绩效对应着不同的计算规则。

因此一个策略模式的程序至少由两部分组成。

第一个部分是一组策略类，它封装了具体的算法，并负责具体的计算过程。

第二个部分是环境类Context，Context接受客户请求，随后把请求委托给一个策略类。要做到这一点，说明Context中要维持对某个策略对象的引用。

下面重构上面代码，传统OOP语言中的实现：

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:

//context
var Bonus =function(){this.salary = null;//原始工资this.strategy = null; //绩效等级对应的策略对象
}
Bonus.prototype.setSalary= function(salary){
}
Bonus.prototype.setStrategy= function(strategy){this.strategy = strategy; //设置策略对象
}Bonus.prototype.getBonus= function(){return this.strategy.calculate(this.salary);//
}

再来回顾一下策略模式的思想：

定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。

在对客户对Context发起请求的时候，把它们各自封装成策略类，算法被封装在策略类内部的方法里。在客户对Context发起请求的时候，Context总是把请求委托给这些策略对象中的某一个进行计算。如下：

var bonus = newBonus();
bonus.setSalary(10000);
bonus.setStrategy(newperformanceS()); //设置策略对象
console.log(bonus.getBonus());//输出：40000
bonus.setStrategy(newperformance()); //设置策略对象
console.log(bonus.getBonus());//输出：30000

5.2 javascript版的策略模式

实际上在javascript语言中，函数也是对象，所以更简单和直接的做法是把strategy直接定义为对象

var strategies = {“S”:function(salary){return salary*4;},“A”:function(salary){return salary*4;},“B”:function(salary){return salary*4;}
};

同样，Context也没有必要必须用Bonus类来表示，我们依然用calculateBonus函数来充当Context来接受用户请求，如：

var calculateBonus =function(level,salary){return strategies[level](salary);
}
console.log(calculateBonus(‘S’,20000)); //输出80000
console.log(calculateBonus(‘S’,10000)); //输出30000

5.3 多态在策略模式中的体现

通过使用策略模式重构代码，我们消除了原程序中大片的条件分支语句。所以跟计算奖金有关的逻辑不在放在Context中，而是分布在各个策略对象中。Context并没有计算奖金的能力，而是把这个职责委托给了某个策略对象。

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

缓动算法，最初是来自Flash，但可以非常方便的移植到其它语言中。

这些算法接受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;}
};

以下代码思想来源于jQuery库，由于本节内容是策略模式，而非编写一个完整的动画库，因此我们省去了动画的队列控制等更多完整功能。

定义一个div

<body><div style=’position:absolute;background:blue’ id=”div”></div>
</body>

var Animate = function(dom){this.dom = dom;this.startTime = 0;this.startPos = 0;this.endPos = 0;this.propertyName = null;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; //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);}
//调用step},19);
}

propertyName：要改变的CSS属性名，如‘left’、‘top’分别表示左右移动和上下移动

endPos:小球运动的目标位置

duration：动画持续时间

easing:缓动算法

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

Animate.prototype.step = function(){var t = +new Date;if(t>=this.startTime+this.duration){ //(1)this.update(this.endPos);return false;}var pos =this.easing(t-this.startTime,this.startPos,this.endPos-this.startPos,this.duration);this.update(pos);
}

(1)注释的意思，如果当前时间大于开始时间加上动画持续时间之和，说明动画已经结束，此时要修正小球的位置。主要用于修正最终的目标位置。

负责更新CSS属性值的Animate.prototype.update方法：

Animate.prototype.update = function(pos){this.dom.style[this.prototypeName]= pos+”px”;
}

可以验证结果：

var div = document.getElementById(‘div’);
var animate = new Animate(div);
animate.start(‘left’,500,1000,’strongEaseOut’);
//animate.start(‘top’,1500,500,’strongEaseIn’);

5.5 更广义的“算法”

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

5.6 表单校验的第一个版本

提交表单数据，在数据交给后台之前，常常要做的一些客户端力所能及的校验工作，比如注册的时候需要校验是否填写了用户名，密码长度等等。这样可以避免因为提交不合法数据而带来的不必要网络开销。

如下：

<script>
var registerForm= document.getElementById(‘registerForm’);
registerForm.οnsubmit= function(){if(registerForm.userName.value===’’){alert(‘用户名不能为空’);}if(registerForm.password.value.length<6){alert(‘密码长度不能少于6位’);}if(!/^1[3|5|8][0-9]{9}$/.test(registerForm.phoneNumber.value)){alert(‘手机号码格式不正确’);return false;}
}
</script>

这是一种常见的代码编写方式，它的缺点跟计算资金的最初版本一模一样。

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

registerForm.onsubmit函数缺乏弹性，如果增加了一种新的校验规则，或者想把密码的长度从6改成8，我们必须深入registerForm.onsubmit函数的内部实现，这是违反开放—封闭原则的

算法的复用性差，如果在程序中增加另一个表单，这个表单也需要进行一些类似的校验，那我们很可能将这些校验逻辑复制得漫天野。

5.6.2 用策略模式重构表单校验

下我们将用策略模式来重构表单校验，第一步我们要把校验逻辑都封装成策略对象：

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]$/.test(value)){return errorMsg;}}
}

接下来我们来准备一个Validator类。它用来做为Context，负责接收用户的请求并委托给strategy对象。在给出Validator类的代码之前，有必要提前了解用户是如何向Validateor类发送请求的，这有助于我们知道如何去编写Validator类的代码，如下：

var validataFunc = function(){var validator = new 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(){varerrorMsg = validataFunc(); //如果errorMsg有确切的返回值，说明未通过校验if(errorMsg){alert(errorMsg);return false;}
}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>

从这段代码中可以看到，我们先创建了一个validator对象，然后通过validator.add方法，往validator对象中添加一些校验规则。validator.add方法接受3个参数，元素、规则、提示信息。

具体实现如下：

var Validator = function(){this.cache = [];
}
Validator.prototype.add =function(dom,rule,errorMsg){var ary = rule.split(‘:’);this.cache.push(function(){var strategy =ary.shift();//用户挑选的strategyary.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;}}
}

使用策略模式重构代码之后，我们仅仅通过“配置”的方式就可以完成一个表单的校验，这些校验规则也可以复用在程序的任何地方，还能作为插件的形式，方便地被移植到其它项目中。

在修改某个校验规则的时候，只需要编写或者改写少量的代码。比如我们想将用户名输入框的校验规则改成用户名不能少于4个字符，可以看到，这时候的修改是毫不费力的如下：

validator.add(registerForm.userName,’isNonEmpty’,’用户名不能为空’);
//改成：
validator.add(registerForm.userName,’minLength:10’,’用户名长度不能小于10位’);

5.6.3 给某个文本输入框添加多种校验规则

为了让读者把注意力放在策略模式的使用上，目前我们的表单校验实现留有一点小遗憾：一个文本输入框只能对应一种校验规则，比如，用户名输入框只能校验输入是否为空：

validator.add(registerForm.userName,’isNonEmpty’,’用户名不能为空’);

如果我们既想校验它是否为空，又想校验它输入文本的长度不小于10怎么办，我们期望以如下的形式进行校验：

validator.add(

     registerForm.userName,

       {strategty:’isNonEmpty’,errorMsg:’用户名不能为空’}

       ,{strategy:’minLength:6’,errorMsg:’用户名长度不能小于10位’}

);

如下：

<html>
<body><form action=”” id = “registerForm”method=”post”>请输入用户名：<input type=’text’ name=’userName’ />请输入密码：<input type=’text’ name = ‘password’ />请输入手机号码：<input type=’text’ name = ‘phoneNumber’ /></form>
</body>
</html><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>

/*************策略对象************/

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= [];
}
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);});})(rule)} //end for
};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;}
}

5.7 策略模式的优缺点

策略模式是一种常用且有效的设计模式，本章提供了计算奖金、缓动动画、表单校验这三个例子来加深对策略模式的理解。

优点：

l 有利于组合、委托和多态等技术和思想，可以有效地避免多重条件选择语句

l 提供了对开放----封闭原则的完美支持，将算法封装在独立的strategy中，使得它们易于切换，易于理解，易于扩展。

l 策略模式中的算法也可以利用在系统的其他地方，从而避免许多重复的复制粘贴工作

l 在策略模式中利用组合和委托来让Context拥有执行算法的能力，这也是继承的一种更轻便的替代方案。

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

MES结构介绍
功能模块1：1：查询与报表WIP现况报表观看全厂各生产线的系统布局，并对各资料收集站的及时监控。查询各生产线工作指令(WORK ORDER)的生产状况及在制品(WIP)。查询各生产线机型(Model)的生产状况及在制品(WIP)。当日各生产线测试站的测试结果及不良状况。依各种状况查询投入及…...
2024/4/20 23:45:05
Android开发插件Eclipse ADT
Eclipse ADT 是 Eclipse 平台下用来开发 Android 应用程序的插件！！在线安装地址：https://dl-ssl.google.com/android/eclipse/...
2024/4/20 23:45:04
VBA 日期控件
1、效果：1）单击A列某一个单元格，弹出日期选择控件（跟随选择的单元格移动）。2）选择日期后点击日期控件，自动将日期写入A列的单元格，控件隐藏。2、代码：Private Sub DTPicker21_Click() ActiveCell = DTPicker21.Value Me.DTPicker21.Visible = FalseEnd SubPriva…...
2024/4/20 23:45:04
JavaScript设计模式之发布—订阅模式
发布—订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。在JavaScript开发中，我们一般用事件模型来替代传统的发布—订阅模式。现实中的发布－订阅模式不论是在程序世界里还是现实生活中，发布—…...
2024/4/27 15:46:49
Android开发插件 Eclipse ADT
源地址：http://www.apkbus.com/forum.php?mod=viewthread&tid=79824&extra=page%3D1Eclipse ADT 是 Eclipse 平台下用来开发 Android 应用程序的插件。在线安装地址：https://dl-ssl.google.com/android/eclipse/ 有些不能在线更新下载的，我已经把ADT上传到网盘了…...
2024/4/27 16:04:00
RS-485的抗雷击技术
YRS-485防雷击设计是提高系统可靠性的重要措施。本文将介绍RS-485防雷击技术的实现原理和相关标准，并介绍采用TED-485为基础实现RS-485接口的整体防雷击和过压保护的实现方法及模拟实验测试结果。随着数字通讯技术的发展和智能家电的普及，一个系统往往由多个需要相互通讯的…...
2024/4/27 16:26:10
eclipse ADT重写方法时解决参数arg0, arg1可读性
本文参考自此处：http://jingyan.baidu.com/article/c35dbcb0eeb0418916fcbcc6.htmleclipse重写时会遇到很多像arg0,arg1这样的情况（如下代码），可读性很差，我有强迫症一定要把这个改成可读性强的才行。 class check implements android.widget.CompoundButton.OnCheckedCha…...
2024/4/27 14:50:20
Javascript设计模式-03-建造者模式
Javascript设计模式 - 03 - 建造者模式简介建造者模式可以将一个复杂的对象的构建与其表示相分离，使得同样的构建过程可以创建不同的表示，用户只要指定需要建造的类型，其他具体的建造过程和细节不需要知道，就可以得出对应的结果，总结：拆解流程，各司其职作用和注意事项作…...
2024/4/27 16:27:07
强大的web电子表格控件dhtmlxSpreadsheet免费下载地址
tmlxSpreadsheet 是一个由JavaScript 和 PHP 写成的电子表格控件(包含WP插件, Joomla插件等等).。程序员可以容易的添加一个类似Excel功能的,可编辑的表格功能到自己的Web应用中。目前有一些在线的电子表格应用，例如谷歌的google docs，但是这些应用不能用在内网或将数据存…...
2024/4/20 21:14:48
eclipse更新ADT与SDK
前几天，偶尔发现了ADT最新的一个工具，android lint，这个工具是在ADT 16.0后才发布的，一直想尝试下，结果打开自己的eclipse，发现是12.0，所以就想着把自己的升级下。顺便也更新下SDk版本。 ok，下面简要说明下我的更新过程。首先是ADT 1. Eclipse中打开Help->Install …...
2024/4/20 21:14:48
JavaScript设计模式----职责链模式
声明：这个系列为阅读《JavaScript设计模式与开发实践》 ----曾探@著一书的读书笔记1.职责链模式的定义使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。2.2.1 简单职责链…...
2024/4/27 15:50:58
SQL脚本积累之五-----Oracle循环示例
Oracle循环示例--定义变量 DECLARE i number(10); --柜员及用户名顺序号 bankNum number(10); --分行号partNum number(10); --部门号GovNum number(10); --机构号KbankNum number(10); --库行号MoneyNum number(10); --钱箱顺序号AutFirst number(10); --授权…...
2024/4/20 23:44:59
vb 中ImageList 控件的安装
我的这个vb版本，事先是没有ImageList 控件的，但是可增加。ImageList控件是 ActiveX 控件组的一部分，该控件组可以在文件 MSCOMCTL.OCX ，你可以去网上下一个MSCOMCTL.OCX，这里是(在我的资源中)我在网上下在载的，并且里面含有注册程序，将这个压缩包解压缩后，里面有…...
2024/4/20 23:44:58
浅析JavaScript设计模式——发布-订阅/观察者模式
观察者模式定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知前一段时间一直在写CSS3的文章一直都没写设计模式今天来写写大名鼎鼎观察者模式先画张图观察者模式的理解我觉得还是发布-订阅模式的叫法更容易我们理解（不…...
2024/4/27 15:48:50
解决 ubuntu 14.04下，eclipse adt-bundle-linux 闪退的问题，最新ADT-23.0.7
解决 ubuntu 14.04下，eclipse adt-bundle-linux 闪退的问题，最新ADT-23.0.7今天早上，早早的来到办公室，想把领导昨天布置的任务，快速完成。其实，就是很简单的一个任务，下载一个城市的离线地图，到sd上，当程序离线时，使用离线地图。但是打开电脑后，打开eclipse 只要鼠…...
2024/4/20 23:44:55
Simple Factory Pattern 简单工厂模式——《深入浅出设计模式（C#/Java版）》
最近想学习设计模式，就找了一本书来看，书名：《深入浅出设计模式（C#/Java版）》莫勇腾编著。以下内容就是从该书中摘抄下来的，实例都经过测试了，而且容易理解，特意积累下来。Simple Factory Pattern(简单工厂模式):专门创建一个类来负责创建其他类的实例，被创建的实例…...
2024/4/27 15:53:24
Android开发环境搭建——Eclipse ADT bundle
一，软件包下载原官方下载地址：http://developer.android.com/sdk/ 被墙，国内镜像站点为：http://wear.techbrood.com/sdk/index.html 二，软件包介绍 The Eclipse ADT Bundle provides everything you need to start developing apps, including the Android SDK tools a…...
2024/4/20 2:16:18
JavaScript设计模式-观察者模式
观察者模式也可以称为订阅模式，是一种从发布，到订阅，再到通知的过程。首先说什么是观察者模式：观察者模式就是定义了一个对象一对多的关系，让多个观察者同时监听一个大对象，当一个大对象发生变化时，所有的依赖它的对象都会得到通知。比如说：淘宝上某店铺的某品…...
2024/4/27 14:43:51
MSFLEXGRID控件在win7、VS2008下注册
VS2008选择完整安装也找不到MsFlexGrid控件的踪影了。这给我之前使用VC6添加过MsFlexGrid控件的MFC程序移植到vs2008下增加了很多困扰。几经尝试才找到解决方案，记录备忘。首先本机肯定是没有Msflxgrd.ocx的，在有Msflxgrd.ocx的机器或者网上下载到Msflxgrd.ocx，放在"C…...
2024/4/20 23:44:51
eclipse adt开发android ndk没有NDK选项问题的解决方案
今天是2015年1月28号，整理一下昨天使用eclipse adt搭建的Androidndk开发平台，遇到的eclipse里面没有NDK选项的问题。自从Google推出android studio 1.0版以后，官方就不再提供bundle的版本下载，只能先下载eclipse，然后在eclipse上安装adt，只要是全选，这个时候是不存在没有…...
2024/4/20 8:05:18

【学习笔记javascript设计模式与开发实践（策略模式）----5】