轻松掌握JavaScript策略模式


Posted in Javascript onAugust 25, 2016

定义:定义一系列的算法,把它们一个个封装成函数,也可把它们作为属性统一封装进一个对象,然后再定义一个方法,该方法可根据参数自动选择执行对应的算法。 

一般用于在实现一个功能时,有很多个方案可选择的情况。 

例子1:根据员工薪水salary、绩效等级S、A、B、C,来计算年终奖

//封装了所有算法的策略对象
var strategies = {
  'S': function(salary){
    return salary*4;
  },
  'A': function(salary){
    return salary*3;
  },
  'B': function(salary){
    return salary*2;
  },
  'C': function(salary){
    return salary*1;
  }
} //定义自动选择算法的方法
var calculateBonus = function(level,salary){
  return strategies[level](salary);
}
//使用
calculateBonus('S',9000); //36000
calculateBonus('B',5000); //10000

例子2:表单验证

//定义验证算法的策略对象
var strategies = function(){
  isEmpty:function(value,errorMsg){
    if(value = ''){
      return errorMsg;
    }
  }
  outRangle:function(value,min,max,errorMsg){
    if(value.length > max || value.length < min){
      return errorMsg;
    }
  }
  isSame:function(oldValue,newValue,errorMsg){
    if(newValue !== oldValue){
      return errorMsg;
    }
  }
  isMobile:function(value,errorMsg){
    if(!/(^1[3|5|8][0-9]{9}$)/.test(value)){
      return errorMsg;
    }
  }
  ......
}

也可不定义以下的Validator类,直接在触发失去焦点事件时调用strategies对象的属性方法来验证当前input项

//定义Validator
var Validator = function(){
  this.cache = [];
}
Validator.prototype.add = function(elem,rules){
  var self = this;
  for(var i = 0, rule; rule = rules[i++]){
    (function(rule){
      var strategyAry = rule.strategy.split(':');
      var errorMsg = rule.errorMsg;
      self.cache.push(function(){
        var strategy = strategyAry.shift();
        strategyAry.unshift(elem.value);
        strategyAry.push(errorMsg);
        return strategies[strategy].apply(elem,strategyAry);
      })
    })(rule)
  }
}
Validator.prototype.start = function(){
  for(var i = 0, func; func = this.cache[i++]){
    var errorMsg = func();
    if(errorMsg){
      return errorMsg;
    }
  }
}

使用:

var validator = new Validator();
validator.add(elem.userName,[
  {strategy:'isEmpty', errorMsg:'用户名不能为空'},
  {strategy:'outRangle:6:12', errorMsg:'用户名长度为6-12位'}
]);
......
var errorMsg = validator.start();
......

附:参数配置对象 
假如有一个函数foo(a,b,c,d,e,f...),它的参数很多,这样的函数不好使用,参数不好记!比较好的方法是使用一个对象来包含这些参数,然后再把该对象传递给函数,函数再对这个对象的属性做处理

var prop = {
  a:55,
  b:'ss',
  c:function(){...}
  d:{x:1,y:2}
  ...
}
foo(prop);

这样一来,使用函数时就不必去记参数顺序了,只需记住参数对象的几个属性名字就行,不易出错 
参考文献: 《JavaScript模式》 《JavaScript设计模式与开发实践》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 写类方式之七
Jul 05 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
angular中的post请求处理示例详解
Jun 30 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 Javascript
Javascript 6里的4个新语法
Aug 25 #Javascript
Javascript实现代码折叠功能
Aug 25 #Javascript
深入浅出ES6之let和const命令
Aug 25 #Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 #Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 #Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 #Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 #Javascript
You might like
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
PHP仿盗链代码
2012/06/03 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
javascript for循环设法提高性能
2010/02/24 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
浅谈js原生拖放
2016/11/21 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
python正则分组的应用
2013/11/10 Python
python字符串中的单双引
2017/02/16 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
一夜的工作教学反思
2014/02/08 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
优质服务口号
2014/06/11 职场文书
小学生作文批改评语
2014/12/25 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL