读书笔记之策略模式

最近在看《javascript设计模式与开发实践》。

var calc = function(level,salary){
         if(level === "A"){
            return 3*salary
         }
         if(level === "B"){
            return 2*salary
         }
         if(level === "C"){
            return 1*salary
         }
}

这段代码看起来十分简单，但是随着后期的拓展，要添加更多的if语句，calc函数会变得更加庞大，不易于维护。
如果我要修改原有的计算分之，可能每次都要修改calc这个方法。实际上，这个calc这个方法的设计初衷只是为了返回 绩效工资。
在整个代码的其它部分，可能还需要这个计算方法，难道还要copy一份过去么，那么同样的修改要修改两块代码。

用策略模式来重构代码

• 策略模式指的是定义一系列的算法，把他们一个个都封装起来。将不变的部分和变化的部分分割开始每个设计模式的主题，策略模式的目的就是将算法的使用与算法的实现分离开来。

• 再说上边的需求，我们简单思考下，其实变化的部分就是员工的等级和工资,而我们的目的就是返回绩效工资这部分是不变的

//  根据员工的level和salary 金额的计算
var straigies = {
    “A”: function(salary){
        return fn*3
    },
    “B”: function(salary){
        return fn*2
    },
    “C”: function(salary){
        return fn*1
    }
}
//不变的部分
var calc = function(level,salary){
     return straigies[level](salary)
}
// 执行
calc("A",5000)    // => 15000

比较下两段代码，不见了不友好的 if判断，算法(策略)都放在了straigies 中，后续需求 只需要维护straigies对象即可。

• 用策略模式来重构表单验证

很多需要提交表单的业务场景，都需要如下结构的代码

$('submitBtn').on('click',functioin(){
    if($name.value().length < 6){
         console.log("用户名长度不能少于6")
    }
   if($phone.value() != ''){
        console.log("电话号码不能为空")
 }
  ajaxFn()
})

随着 判断条件的增加，函数的结构会越来越臃肿庞大，而需要修改判断的条件，就又要深入指定的if判断去筛选，单纯的新增规则在这个函数里，复用性太差。结合策略模式，可以把if判断这一部分 函数里提取出来重新封装，提高代码的复用性和可读性。

对代码结构的期望

$('submitBtn').on('click',functioin(){
  var form = document.querySelector('.form');
  var validator = new validator ();
  validator.addrules(form.username,"isNonEmpty","不能为空")
  validator.addrules(form.phone,"minLength:6","最少为6位")
  var erroMsg = validator.start();
  if(erroMsg){
     alert(validator);
     return false
  }
  ajaxFn()
})

我们先封装策略类

var stratigies = {
    isNonEmpty: function(value,erromsg){
          if(value == ""){
          return erromsg
        }
    },
  minlength: function(value,length,erromsg){
       if(value.length < length){
          return erromsg
      }
 }
}

封装 验证(validator类)

var Validator = function(){
  this.cache = [] //用来缓存
}
Validator.prototype.add = function(item,rule,erroMsg){
  var arg = rule.split(":") // rule= >  "isEmpty" => ["isEmpty"] ||  "minLength:5"=> ["minlength", “5”];
  this.cache.push(function(){
      var strategy = arg.shift();  // =>"isEmpty" || minLength
      arg.unshift(item.value);  //[value] || [value,5]
      arg.push(errMsg)// [value,errMsg] || [value,5,errMsg]
      return  stratigies[strategy].apply(item,arg)
  })
}
//start方法就是遍历这个Validator里缓存的方法并执行
Validator.prototype.start = function(){
  for(var i=0;i<this.cache.length;i++){
      var fn = this.cache[i];
      var msg = fn()    // =>开始校验，
      if(msg){
         return msg   // 如果msg有值 就说明验证不通过，跳出循环
      }
  }
}

此时，如果需要添加规则 或是修改验证规则,就很简单了
我们可以在stratigies里添加策略，也可以在 提交表单的函数里，新增或者修改规则

validator.addrules(form.phone,"minLength:6") =》 validator.addrules(form.phone,"minLength:10")

很蛋疼的是，对用户名判断只能一次输入一种规则，如果需要加一种判断规则，我就要在add一次strategy,
书中提供了进一步的拓展。

//预期
  validator.addrules(form.username,[
   {
      "erroMsg": "不能为空",
      "strategy": 'isNonEmpty'
    },
   {
      "erroMsg": "最小为6位",
      "strategy": 'minLength:6'
    }
])

将策略用数组的方式传入validator对象里，缓存在this.cache里,只需要调整对应的add方法就可以

//old type
Validator.prototype.add = function(item,rule,erroMsg){
  var arg = rule.split(":") // rule= >  "isEmpty" => ["isEmpty"] ||  "minLength:5"=> ["minlength", “5”];
  this.cache.push(function(){
      var strategy = arg.shift();  // =>"isEmpty" || minLength
      arg.unshift(item.value);  //[value] || [value,5]
      arg.push(errMsg)// [value,errMsg] || [value,5,errMsg]
      return  stratigies[strategy].apply(item,arg)
  })
}
// new Type
Validator.prototype.add = function(item,rules){
   var  _this = this; //保存this指针   for循环里的的自执行函数的this指向window，用_this修复指针
  //遍历rules
 for(var i = 0;i<rules.length;i++){
    var rule = rules[i];
    (function(rule ){
       var arg = rule.strategy.split(":") // rule= >  "isEmpty" => ["isEmpty"] ||  "minLength:5"=> ["minlength", “5”];
       var  errMsg = rule.errMsg;
      _this.cache.push(function(){
            var strategy = arg.shift();  // =>"isEmpty" || minLength
            arg.unshift(item.value);  //[value] || [value,5]
            arg.push(errMsg)// [value,errMsg] || [value,5,errMsg]
            return  stratigies[strategy].apply(item,arg)
         })
      })(rule)
  }
}