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 相关文章推荐
js常见表单应用技巧
Jan 09 Javascript
编写可维护面向对象的JavaScript代码[翻译]
Feb 12 Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
全网小程序接口请求封装实例代码
Nov 06 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数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
js的对象与函数详解
2019/01/21 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
简单的编程0基础下Python入门指引
2015/04/01 Python
Django csrf 验证问题的实现
2018/10/09 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
python文件及目录操作代码汇总
2020/07/08 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
Shell如何接收变量输入
2012/09/24 面试题
餐厅销售主管职责范本
2014/02/19 职场文书
市场总经理岗位职责
2014/04/11 职场文书
安全生产月活动总结
2014/05/04 职场文书
关于学习的演讲稿
2014/05/10 职场文书
社团活动总结报告
2014/06/27 职场文书
停车场管理协议书范本
2014/10/08 职场文书
研讨会通知
2015/04/27 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
vue使用watch监听属性变化
2022/04/30 Vue.js