JavaScript实现策略模式
在开篇之前先分享今天看到的一句关于设计模式的话:将不变的部分和变化的部分隔开是每个设计模式的主题
请大家自行感受这句话的精髓所在,并且思考学习设计模式究竟能给我们编程带来什么样的东西,欢迎大家在文章下面评(chui)论(shui),分享自己的宝贵见解。好了,回到今天的正题,JavaScript实现策略模式。
什么是策略模式
定义一系列的算法,把它们一个个封装起来,并且使它们可以相互转换。讲人话就是:我想去旅游,那么我可以选择不同的方法(策略)去达到我的目的——旅游。比如说坐飞机,走路,甚至是小黄车ofo都行,这看你具体是怎么选择。如果你想快一点,那就选择坐飞机,如果你有梦想,那就选择走路,不管你选择什么,最后你都能达到相同的目的——旅游。
策略模式思想
接合上面的例子和开篇第一句话,在策略模式中,不变的是我们的目的——旅游,而变化的部分是我们的去的方式(坐飞机,走路,ofo),所以我们就要把这两部分隔开以实现解耦。也就是策略模式的目的所在。为了比较策略模式带来的好处,我先用一般的方式完成我上面的例子。请看代码:
var travel = function(transportation, destination) {
if(transportation == 'plane') {
console.log("乘坐飞机到" + destination + "啦");
}
if(transportation == 'foot') {
console.log("走路到" + destination + "啦");
}
if(transportation == 'ofo') {
console.log("骑小黄车到" + destination + "啦");
}
}
travel("foot", "北京"); //控制台打印:走路到北京啦
travel("ofo", "天堂"); //控制台打印:骑小黄车到天堂啦
我们现在已经完成了旅游的代码,貌似不错哦。但是恕我直言,这就是一段辣鸡代码。嘻嘻,具体有如下原因:
1、travel函数包含了很多if语句,这些语句需要覆盖所有的逻辑分支
2、travel函数缺乏弹性,如果现在又多了一种交通工具小蓝车,我们就必须修改travel函数源代码,这不科学!属实是违反了开放-封闭原则。
现在我们使用策略模式来优化这段代码,请看下面代码:
var strategies = {
plane: function (destination) {
console.log("乘坐飞机到" + destination + "啦");
},
foot: function (destination) {
console.log("走路到" + destination + "啦");
},
ofo: function (destination) {
console.log("骑小黄车到" + destination + "啦")
}
}
var travel = function (transportation, destination) {
strategies[transportation](destination);
}
travel("foot", "北京");
travel("ofo", "天堂");
执行结果如下:

可以看到我们通过策略模式完成了我们的需求,并且如果以后多了交通工具,管它是小黄车小白车还是小黑车,我们只用在策略对象strategies添加新的配置就可以了,而不用改动我们的travel函数。
再次回顾开篇第一句话:将不变的部分和变化的部分隔开是每个设计模式的主题
结合我们的策略模式思考,策略模式不变的部分就是目的(上例旅游),变化的部分就是过程(交通工具和目的地)。通过策略模式我们把这两部分彻底解耦,我们的过程(strategies)变化了也不会影响到我们的目的(travel)。我认为这就是策略模式给我们带来的好处。
JavaScript实现策略模式的更多相关文章
- javascript 设计模式-----策略模式
在<javascript设计模式>中,作者并没有向我们介绍策略模式,然而它却是一种在开发中十分常见的设计模式.最常见的就是当我们遇到一个复杂的表单验证的时候,常常需要编写一大段的if和el ...
- [设计模式] javascript 之 策略模式
策略模式说明 定义: 封装一系列的算法,使得他们之间可以相互替换,本模式使用算法独立于使用它的客户的变化. 说明:策略模式,是一种组织算法的模式,核心不在于算法,而在于组织一系列的算法,并且如何去使用 ...
- javascript设计模式——策略模式
前面的话 在程序设计中,常常遇到类似的情况,要实现某一个功能有多种方案可以选择.比如一个压缩文件的程序,既可以选择zip算法,也可以选择gzip算法.这些算法灵活多样,而且可以随意互相替换.这种解决方 ...
- javascript设计模式-策略模式
策略模式笔记 将定义的一组算法封装起来,使其相互之间可以替换. 封装的算法具有一定独立性,不会随客户端变化而变化. 与状态模式异同? 1. 结构上看,它与状态模式很像,也是在内部封 ...
- javascript 写策略模式,商场收银打折优惠策略
[Decode error - output not utf-8] ----------------------------- 购物清单 方便面 : 100 x 50 = 5000 | 4000 菊花 ...
- JavaScript设计模式 - 策略模式(表单验证)
表单提交的时候,总是要校验,不同的表单可能校验相同的功能. 为了避免代码重复的复制黏贴,使用策略模式,写出来的代码赏心悦目,且可扩展,还可以作为插件到处使用 <!DOCTYPE html> ...
- JavaScript 模拟策略模式
/** * 模拟一个接口,其方法会抛出异常: */ function FlyInter () {} FlyInter.prototype.fly = function() { throw '实现这个接 ...
- JavaScript设计模式之策略模式
所谓"条条道路通罗马",在现实中,为达到某种目的往往不是只有一种方法.比如挣钱养家:可以做点小生意,可以打分工,甚至还可以是偷.抢.赌等等各种手段.在程序语言设计中,也会遇到这种类 ...
- JS设计模式——策略模式
设计模式高大上,业务代码用不上...平时用不上我们就可以忽略了吗? 非也,就像面试造火箭,工作拧螺丝一样.万一我们公司哪天要造火箭了,你得立马能上手. 同时,有些复杂的业务代码也可以用设计模式的思想去 ...
随机推荐
- 用iptables 做NAT代理上网
背景:有一台A服务器不能上网,和B服务器通过内网来连接,B服务器可以上网,要实现A服务器也可以上网. 内网主机: A eth1:172.16.1.8 外网主机: B eth0:10.0.0.61外网主 ...
- 【20171106早】BeEF 工具初探
老黑今天接触BeEF工具,首先要了解这个工具能够做什么? 0x01:功能介绍 专业文档:点击这里 通俗的说就是可以控制别的浏览器,获取浏览器的信息.然后做something 专业的说就是好用的渗透测试 ...
- 【Win 10 应用开发】UI Composition 札记(三):与 XAML 集成
除了 DirectX 游戏开发,我们一般很少单独使用 UI Composition ,因此,与 XAML 互动并集成是必然结果.这样能够把两者的优势混合使用,让UI布局能够更灵活. 说到与 XAML ...
- [转载] Java集合---HashMap源码剖析
转载自http://www.cnblogs.com/ITtangtang/p/3948406.html 一.HashMap概述 HashMap基于哈希表的 Map 接口的实现.此实现提供所有可选的映射 ...
- [转载] Gossip算法学习
转载自http://blog.csdn.net/yfkiss/article/details/6943682/ 1. 概述gossip,顾名思义,类似于流言传播的概念,是一种可以按照自己的期望,自行选 ...
- 【python】__new__和__init__区别
原文:http://blog.csdn.net/cnmilan/article/details/8849680 __new__:创建对象时调用,返回当前对象的一个实例__init__:创建完对象后调用 ...
- TCP网络程序实例——服务器端与客户端交互
实例02 客户端/服务器的交互 实例位置:光盘\Code\SL\14\02 视频位置:光盘\Video\14\ ◆ 服务器端 创建服务器端项目Server,在Main方法中创建TCP连接对象:然后监听 ...
- MySQL解压版配置步骤详细教程
解压mysql到D盘根目录 在解压路径下复制my-default.ini,修改名称为my.ini 在my.ini内容如下 [client]default-character-set=utf8 [mys ...
- Android隐藏软键盘
1,用java代码隐藏: /**隐藏软键盘**/ View view = getWindow().peekDecorView(); if (view != null) { ...
- jquery.form.js+jquery.validation.js实现表单校验和提交
一.jquery引用 主要用到3个js: jquery.js jquery.form.js jquery.validation.js 另外,为了校验结果提示本地化,还需要引入jquery.vali ...