定義:定義一系列的算法,把它們一個個封裝成函數,也可把它們作為屬性統一封裝進一個對象,然后再定義一個方法,該方法可根據參數自動選擇執行對應的算法。
一般用于在實現一個功能時,有很多個方案可選擇的情況。
例子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); //36000calculateBonus('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項
//定義Validatorvar 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設計模式與開發實踐》
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答