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 $.ajax入门应用一
Nov 19 Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
Jquery 获得服务器控件值的方法小结
May 11 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
JavaScript如何借用构造函数继承
Nov 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编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
Python之eval()函数危险性浅析
2014/07/03 Python
Python运算符重载用法实例分析
2015/06/01 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
教师岗位职责范本
2013/12/29 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
质量整改通知单
2015/04/21 职场文书
教师继续教育反思周记
2015/06/25 职场文书
学生会工作感言
2015/08/07 职场文书
高中体育课教学反思
2016/02/16 职场文书
总结Python常用的魔法方法
2021/05/25 Python
MySQL实现配置主从复制项目实践
2022/03/31 MySQL
DE1107机评
2022/04/05 无线电