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 相关文章推荐
基于jquery的拖动布局插件
Nov 25 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
node.js文件操作系统实例详解
Nov 05 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中对用户身份认证实现两种方法
2011/06/04 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
python中执行shell的两种方法总结
2017/01/10 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
浅析python标准库中的glob
2020/03/13 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
农民工工资发放承诺书
2014/03/31 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
2014年女职工工作总结
2014/11/27 职场文书
工程资料员岗位职责
2015/04/13 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript