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 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
原生JS发送异步数据请求
Jun 08 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 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生成txt文件标题及内容的方法
2014/01/16 PHP
php中session与cookie的比较
2015/01/27 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
python进阶教程之循环对象
2014/08/30 Python
python进程管理工具supervisor使用实例
2014/09/17 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
Python语言进阶知识点总结
2019/05/28 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
Python如何读写CSV文件
2020/08/13 Python
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
网络工程专业自荐信范文
2014/03/16 职场文书
商场促销活动策划方案
2014/08/18 职场文书
租房协议书范文
2014/08/20 职场文书
秋冬农业生产标语
2014/10/09 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL