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 相关文章推荐
学习ExtJS(二) Button常用方法
Oct 07 Javascript
js getElementsByTagName的简写方式
Jun 27 Javascript
Javascript 类、命名空间、代码组织代码
Jul 31 Javascript
javascript淡入淡出效果的实现思路
Mar 31 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
论JavaScript模块化编程
Mar 07 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 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树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
centos7之Python3.74安装教程
2019/08/15 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
Python库安装速度过慢解决方案
2020/07/14 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
迟到检讨书800字
2014/01/13 职场文书
制药工程专业个人求职自荐信
2014/01/25 职场文书
员工合理化建议书
2014/05/19 职场文书
联片教研活动总结
2014/07/01 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
先进单位事迹材料
2014/12/25 职场文书
锅炉工岗位职责
2015/02/13 职场文书
请客吃饭开场白
2015/06/01 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python