JavaScript设计模式之策略模式实例


Posted in Javascript onOctober 10, 2014

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

回忆下jquery里的animate方法.

$( 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也不是没有可能。

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

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 相关文章推荐
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
javascript trie前缀树的示例
Jan 29 Javascript
JavaScript实现通讯录功能
Dec 27 Javascript
js中实现继承的五种方法
Jan 25 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 #Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 #Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 #Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 #Javascript
分享一款基于jQuery的视频播放插件
Oct 09 #Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 #Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 #Javascript
You might like
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
python友情链接检查方法
2015/07/08 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
Python基于内置函数type创建新类型
2020/10/22 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
python 实现Harris角点检测算法
2020/12/11 Python
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
高中生的学习总结自我鉴定
2013/10/26 职场文书
应用化学专业职业生涯规划书
2013/12/31 职场文书
公司开业庆典主持词
2014/03/21 职场文书
环保倡议书
2014/04/14 职场文书
分公司负责人任命书
2014/06/04 职场文书
安全口号大全
2014/06/21 职场文书
信用卡工资证明格式
2014/09/13 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
小平小道观后感
2015/06/09 职场文书
河童之夏观后感
2015/06/11 职场文书