详解JavaScript设计模式经典之策略模式-js教程-PHP中文网

详解JavaScript设计模式经典之策略模式

黄舟

发布： 2017-03-20 11:04:38

原创

1503人浏览过

策略模式的意义是定义一系列的算法，把它们一个个封装起来，并且使它们可相互替换。
一个小例子就能让我们一目了然。

回忆下jquery里的animate方法.

$( p ).animate( {“left: 200px”}, 1000, ‘linear’ );  //匀速运动
$( p ).animate( {“left: 200px”}, 1000, ‘cubic’ );  //三次方的缓动

登录后复制

这2句代码都是让p在1000ms内往右移动200个像素. linear(匀速)和cubic(三次方缓动)就是一种策略模式的封装.

再来一个例子. 上半年我写的dev.qplus.com, 很多页面都会有个即时验证的表单. 表单的每个成员都会有一些不同的验证规则.

比如姓名框里面，需要验证非空，敏感词，字符过长这几种情况。当然是可以写3个if else来解决，不过这样写代码的扩展性和维护性可想而知。如果表单里面的元素多一点，需要校验的情况多一点，加起来写上百个if else也不是没有可能。

立即学习“Java免费学习笔记（深入）”；

所以更好的做法是把每种验证规则都用策略模式单独的封装起来。需要哪种验证的时候只需要提供这个策略的名字。就像这样：

居然设计家

居然之家和阿里巴巴共同打造的家居家装AI设计平台

查看详情

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秒完成这次工作。

JavaScript设计模式经典之简单工厂模式代码实例

JavaScript设计模式经典之单例模式详解

javascript设计模式之观察者模式详细介绍

以上就是详解JavaScript设计模式经典之策略模式的详细内容，更多请关注php中文网其它相关文章！