DIV CSS 佈局教程網

定義：定義一系列的算法，把它們一個個封裝成函數，也可把它們作為屬性統一封裝進一個對象，然後再定義一個方法，該方法可根據參數自動選擇執行對應的算法。 

一般用於在實現一個功能時，有很多個方案可選擇的情況。 

例子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設計模式與開發實踐》

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。