JS設計模式——策略模式

1. 介紹

策略模式是JS設計模式中一大重要的模式有着普遍的應用

2. 定義

定義一系列的算法，把它們一個個封裝起來，而且使它們能夠相互替換

3. 應用

根據等級、工資計算獎金等相似狀況、使用不一樣的動畫效果、表單驗證等

4. 思想

把算法實現和算法調用分開

5. 實現

1. 基本的策略模式

這個例子是根據傳統的面嚮對象語言進行改造的，不一樣的類都實現了相同的方法，傳入不一樣的實例均可以調用相同的方法。這其中用到了組合、委託、多態的思想。其中把不一樣的實現過程進行拆分，分紅performanceS,performanceA,這是組合的思想，都實現相同的方法calculate這是多態的思想，多態的意思是不一樣的對象調用相同的方法其結果是不一樣的。再經過Bonus類去調用這是委託。

var performanceS=function(){}
performanceS.prototype.calculate=function(salary){
    return salary*4
}
var performanceA=function(){}
performanceA.prototype.calculate=function(salary){
    return salary*3
}
var Bonus=function(){
    this.salary=""
    this.strategy=""
}
Bonus.prototype.setSalary=function(salary){
    this.salary=salary
}
Bonus.prototype.setStrategy=function(strategy){
    this.strategy=strategy
}
Bonus.prototype.getBonus=function(){
    return this.strategy.calculate(this.salary)
}
var bonus = new Bonus()
bonus.setSalary(1000)
bonus.setStrategy(new performanceS())
console.log(bonus.getBonus())//4000
bonus.setStrategy(new performanceA())
console.log(bonus.getBonus())//3000

2. JS版本策略模式

在上個例子中雖然初步實現了策略模式，可是是仿照的傳統面嚮對象語言，而JS的實現更爲簡單，直接把原來的strategy實例定義成函數，原先的Bonus類用calculateBonus函數來委託。組合的思想也仍是比較明顯，多態在這裏體現得不是很明顯，在strategieslevel這句中體現。

var strategies={
    S:function(salary){
        return salary*4
    },
    A:function(salary){
        return salary*3
    }
}
calculateBonus=function(level,salary){
    return strategies[level](salary)
}
console.log(calculateBonus('S',1000))//4000

3. 表單驗證例子

在實際項目中常常須要對錶單進行驗證，用策略模式去實現表單驗證是一種很不錯的方法

var stratiges={
    isNotEmpty:function(val,errormsg){
        if(val.length<0){
            return errormsg
        }
    },
    minLen:function(val,minlen,errormsg){
        if(val.length<minlen){
            return errormsg
        }
    }
}
var Validate=function(){
    this.cache=[]
}
Validate.prototype.add=function(value,rules){
    for(var i=0,len=rules.length;i<len;i++){
        var rule=rules[i]
        var self=this;
        (function(rule){
            var arr = rule.strategy.split(":")
            var strategy=arr.shift()
            arr.unshift(value)
            arr.push(rule.errormsg)
            self.cache.push(function(){
                return stratiges[strategy].apply(null,arr)
            })
        })(rule)
        
    }
}
Validate.prototype.start=function(){
    for(var i=0,len=this.cache.length;i<len;i++){
        var errorMsg = this.cache[i]()
        if(errorMsg){
            return errorMsg
        }
    }
}
var validate = new Validate()
validate.add("yyyy",[{strategy:"isNotEmpty",errormsg:"不能爲空"},{strategy:"minLen:7",errormsg:"不能少於7位"}])
var errormsg = validate.start()
console.log(errormsg)