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中最常用的55个经典小技巧
Nov 29 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
JavaScript中this详解
Sep 01 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
Vue中使用clipboard实现复制功能
Sep 05 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 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的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
深入探究node之Transform
2017/07/20 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
python切换hosts文件代码示例
2013/12/31 Python
Python Socket使用实例
2017/12/18 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
如何写好升职自荐信
2014/01/06 职场文书
离职证明标准格式
2014/09/15 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
小孩不笨观后感
2015/06/03 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang