学习JavaScript设计模式之策略模式


Posted in Javascript onJanuary 12, 2016

把不变的部分和变化的部分隔开是每个设计模式的主题。

  • 条条大路通罗马。我们经常会遇到解决一件事情有多种方案,比如压缩文件,我们可以使用zip算法、也可以使用gzip算法。其灵活多样,我们可以采用策略模式解决。

一、定义

定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。
基于策略类模式的程序至少由两部分组成。第一个部分是一组策略类,策略类封装了具体的算法,并负责具体的计算过程。第二个部分是环境类Context,Context接收客户的请求,随后把请求委托给某一个策略类。

二、示例

计算奖金。绩效为S的发放4倍工资,绩效为A的发放3倍工资,绩效为B的发放2倍工资。

var strategies = {
 "S": function(salary) {
  return salary * 4;
 },
 "A": function(salary) {
  return salary * 3;
 },
 "B": function(salary) {
  return salary * 2;
 }
};

// 接收请求
var calculateBonus = function(level, salary) {
 return strategies[level](salary);
};

// 测试
console.log(calculateBonus("S", 20000));
console.log(calculateBonus("A", 20000));
console.log(calculateBonus("B", 20000));

三、延伸:表单验证

/* 校验策略对象 */
var validateStrategies = {
 isEmpty: function (val, errorMsg) {
  if (!val) {
   return errorMsg;
  }
 },
 isURL: function (val, errorMsg) {
  if (!new RegExp("^(http:\\/\\/|https:\\/\\/)?([\\w\\-]+\\.)+[\\w\\-]+(\\/[\\w\\-\\.\\/?\\@\\%\\!\\&=\\+\\~\\:\\#\\;\\,]*)?$").test(val)) {
   return errorMsg;
  }
 },
 isEmail: function (val, errorMsg) {
  if (!new RegExp('\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+').test(val)) {
   return errorMsg;
  }
 },
 isMaxLength: function (val, length, errorMsg) {
  if (val.length > length) {
   return errorMsg;
  }
 },
 isMinLength: function (val, length, errorMsg) {
  if (val.length < length) {
   return errorMsg;
  }
 }
};

/* validator类 */
var validator = function () {
 // 缓存验证策略
 this.cache = [];
};

/**
 * 添加要验证的策略
 * @param dom  要验证的dom元素
 * @param rules  验证规则
 */
validator.prototype.add = function (dom, rules) {
 var self = this;
 for (var i = 0, rule; rule = rules[i++];) {
  (function (rule) {
   var strategyAry = rule.strategy.split(":");  // ["isMaxLength", "10"]
   var errorMsg = rule.errorMsg;     // "内容长度不能超过10"
   self.cache.push(function () {
    var strategy = strategyAry.shift();   // "isMaxLength"
    strategyAry.unshift(dom.value);    // ["1@qq", "10"]
    strategyAry.push(errorMsg);     // ["1@qq", "10", "内容长度不能超过10"]
    return validateStrategies[strategy].apply(dom, strategyAry);
   });
  })(rule);
 }
};

/* 开始校验 */
validator.prototype.start = function () {
 for (var i = 0, validateFunc; validateFunc = this.cache[i++];) {
  var errorMsg = validateFunc();
  if (errorMsg) {
   return errorMsg;
  }
 }
};


// 测试

<label for="email">邮箱:</label><input type="text" name="email" value="1@qq">

var validatorInstance = new validator();
validatorInstance.add(
 document.getElementsByName("email")[0], 
 [{
  strategy: "isEmpty",
  errorMsg: "内容不能为空"
 },{
  strategy: "isMaxLength:10",
  errorMsg: "内容长度不能超过10"
 },{
  strategy: "isEmail",
  errorMsg: "email格式不对"
 }]);
errorMsg = validatorInstance.start();

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
JS Array对象入门分析
Oct 30 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 #Javascript
jQuery版本升级踩坑大全
Jan 12 #Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 #Javascript
7个jQuery最佳实践
Jan 12 #Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 #Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 #Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 #Javascript
You might like
PHP 查找字符串常用函数介绍
2012/06/07 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
python判断端口是否打开的实现代码
2013/02/10 Python
python实现简单中文词频统计示例
2017/11/08 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
python中time.ctime()实例用法
2021/02/03 Python
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
上学迟到的检讨书
2014/01/11 职场文书
陈欧的广告词
2014/03/18 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript