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 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
总结AJAX相关JS代码片段和浏览器模型
Aug 15 Javascript
拖拉表格的JS函数
Nov 20 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 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备份MYSQL数据的多种方法
2014/01/15 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
PHP之header函数详解
2021/03/02 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
jQuery plugin animsition使用小结
2017/09/14 jQuery
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
详解vue 命名视图
2019/08/14 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
Python中random模块生成随机数详解
2016/03/10 Python
Python pass详细介绍及实例代码
2016/11/24 Python
Python实现读取文件最后n行的方法
2017/02/23 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
python安装后的目录在哪里
2020/06/21 Python
python3排序的实例方法
2020/10/20 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
2014年关于两会精神的心得体会
2014/03/17 职场文书
党员一句话承诺大全
2014/03/28 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
信用卡工资证明范本
2015/06/19 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书