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实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 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
漂亮但不安全的CTB
2006/10/09 PHP
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
Python实现list反转实例汇总
2014/11/11 Python
详解python中requirements.txt的一切
2017/03/03 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
省级青年文明号申报材料
2014/05/23 职场文书
安全环保演讲稿
2014/08/28 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL