轻松掌握JavaScript策略模式

站长资源 2024/11/28 佚名

49 1538 49

DDR爱好者之家 Design By 杰米

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

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

例子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设计模式与开发实践》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js,策略模式,表单验证

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“轻松掌握JavaScript策略模式”

暂无评论...

轻松掌握JavaScript策略模式

jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法

Javascript 6里的4个新语法

评论“轻松掌握JavaScript策略模式”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接