策略模式的意义是定义一系列的算法，把它们一个个封装起来，并且使它们可相互替换。
一个小例子就能让我们一目了然。
回忆下 jquery 里的 animate 方法.
|
1 2 |
$( div ).animate( {"left: 200px"}, 1000, 'linear' ); //匀速运动 $( div ).animate( {"left: 200px"}, 1000, 'cubic' ); //三次方的缓动 |
这 2 句代码都是让 div 在 1000ms 内往右移动 200 个像素. linear(匀速) 和 cubic(三次方缓动) 就是一种策略模式的封装.
再来一个例子. 上半年我写的 dev.qplus.com, 很多页面都会有个即时验证的表单. 表单的每个成员都会有一些不同的验证规则.
比如姓名框里面， 需要验证非空，敏感词，字符过长这几种情况。 当然是可以写 3 个 if else 来解决，不过这样写代码的扩展性和维护性可想而知。如果表单里面的元素多一点，需要校验的情况多一点，加起来写上百个 if else 也不是没有可能。
所以更好的做法是把每种验证规则都用策略模式单独的封装起来。需要哪种验证的时候只需要提供这个策略的名字。就像这样：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
nameInput.addValidata({ notNull: true, dirtyWords: true, maxLength: 30 }) 而notNull，maxLength等方法只需要统一的返回true或者false，来表示是否通过了验证。 validataList = { notNull: function( value ){ return value !== ''; }, maxLength: function( value, maxLen ){ return value.length() > maxLen; } } |
可以看到，各种验证规则很容易被修改和相互替换。如果某天产品经理建议字符过长的限制改成 60 个字符。那只需要 0.5 秒完成这次工作。
xx 2014 年 4 月 10 日
这种也好意思叫设计模式，说不清楚，道不明白，不要误人子弟
【Javascript设计模式14】-备忘录模式 | Tencent AlloyTeam 2012 年 10 月 25 日
[…] 策略模式 […]
【Javascript设计模式12】-迭代器模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 策略模式： http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-strategy-mode/ […]
【Javascript设计模式13】-组合模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 策略模式： http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-strategy-mode/ […]
【Javascript设计模式15】-职责链模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 策略模式： http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-strategy-mode/ […]
【Javascript设计模式17】- 状态模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 策略模式： http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-strategy-mode/ […]
Mahala 2012 年 11 月 12 日
I read your post and wshied I’d written it
【Javascript设计模式6】-桥接模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 策略模式： http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-strategy-mode/ […]
【Javascript设计模式3】-观察者模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 策略模式： http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-strategy-mode/ […]
【javascript设计模式1】-单例模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 策略模式： http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-strategy-mode/ […]
【javascript设计模式5】-代理模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 策略模式： http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-strategy-mode/ […]
【javascript设计模式4】- 适配器模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 策略模式： http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-strategy-mode/ […]