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 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
Expandable "Detail" Table Rows
Aug 29 Javascript
javascript mouseover、mouseout停止事件冒泡的解决方案
Apr 07 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 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模拟HTTP认证
2006/10/09 PHP
PHP读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
初步解析Python下的多进程编程
2015/04/28 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
Django REST framework 视图和路由详解
2019/07/19 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
通俗讲解python 装饰器
2020/09/07 Python
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
手机配件第一品牌:ZAGG
2017/05/28 全球购物
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
甲乙双方合作协议书
2014/10/13 职场文书
万能检讨书
2015/01/27 职场文书
安全承诺书格式范本
2015/04/28 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL