轻松掌握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 Object的extend是一个常用的功能
Dec 02 Javascript
Jquery iframe内部出滚动条
Feb 11 Javascript
一些javascript一些题目的解析
Dec 25 Javascript
javascript计时器事件使用详解
Jan 07 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
ES6中异步对象Promise用法详解
Jul 31 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
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
深入理解Javascript闭包 新手版
2010/12/28 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
浅析JavaScript动画
2015/06/10 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
JS回调函数深入理解
2019/10/16 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
python 容器总结整理
2017/04/04 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
详解python中的json和字典dict
2018/06/22 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
python实现字符串和数字拼接
2020/03/02 Python
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
《望庐山瀑布》教学反思
2014/04/22 职场文书
最美护士演讲稿
2014/08/27 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
介绍信格式
2015/01/30 职场文书
学期个人工作总结
2015/02/13 职场文书
简爱电影观后感
2015/06/10 职场文书
就业证明函
2015/06/17 职场文书
自荐信大全
2019/03/21 职场文书