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在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
jquery 选择器部分整理
Oct 28 Javascript
js 三级关联菜单效果实例
Aug 13 Javascript
JS求平均值的小例子
Nov 29 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
js模拟实现百度搜索
Jun 28 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
一个程序下载的管理程序(一)
2006/10/09 PHP
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
Web开发之JavaScript
2012/03/29 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
简单实现python画圆功能
2018/01/25 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
python 删除非空文件夹的实例
2018/04/26 Python
Python常用的json标准库
2019/02/19 Python
PyQt5实现简易电子词典
2019/06/25 Python
python 字典操作提取key,value的方法
2019/06/26 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
Yahoo-PHP面试题2
2014/12/06 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
专科应届生求职信
2013/11/24 职场文书
产品质量承诺书范文
2014/03/27 职场文书
婚礼秀策划方案
2014/05/19 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
超市采购员岗位职责
2015/04/07 职场文书