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 相关文章推荐
JavaScript 对象成员的可见性说明
Oct 16 Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
js 自动播放的实例代码
Nov 19 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
js实现文字截断功能
Sep 14 Javascript
Angular的事件和表单详解
Dec 26 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 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利用反射实现插件机制的方法
2015/03/14 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
Python中的CSV文件使用"with"语句的方式详解
2018/10/16 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
《动手做做看》教学反思
2014/04/09 职场文书
户籍证明格式
2014/09/15 职场文书
横空出世观后感
2015/06/09 职场文书
个人催款函范文
2015/06/24 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
python 算法题——快乐数的多种解法
2021/05/27 Python
Python pandas求方差和标准差的方法实例
2021/08/04 Python
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript