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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
原生JS实现$.param() 函数的方法
Aug 10 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
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
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
jquery ajax执行后台方法
2010/03/18 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python抓取网页图片并放到指定文件夹
2014/04/24 Python
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
python如何统计序列中元素
2020/07/31 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
Python之list对应元素求和的方法
2018/06/28 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
英文简历中的自我评价用语
2013/12/09 职场文书
创业计划书的主要内容有哪些
2014/01/29 职场文书
开业主持词
2014/03/21 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
外出考察学习心得体会
2016/01/18 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript