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动态绑定事件的简单实现代码
Dec 25 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
jQuery表单验证插件解析(推荐)
Jul 21 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
JS删除String里某个字符的方法
Jan 06 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 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实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
常用的php ADODB使用方法集锦
2008/03/25 PHP
PHP获取表单所有复选框的值的方法
2014/08/28 PHP
js获取变量
2006/08/24 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
axios的拦截请求与响应方法
2018/08/11 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
Python列表切片常用操作实例解析
2019/12/16 Python
python实现处理mysql结果输出方式
2020/04/09 Python
jupyter notebook 重装教程
2020/04/16 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
装潢设计专业推荐信模板
2013/11/26 职场文书
学生打架检讨书大全
2014/01/23 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
网聊搭讪开场白
2015/05/28 职场文书
开学典礼观后感
2015/06/15 职场文书