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)