JavaScript设计模式—-策略模式[通俗易懂]

全栈程序员站长

发布于 2022-09-14 15:32:53

2850

发布于 2022-09-14 15:32:53

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

声明：这个系列为阅读《JavaScript设计模式与开发实践》 —-曾探@著一书的读书笔记

1.策略模式的定义

将不变的部分和变化的部分隔开是每个设计模式的主题。

定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。

2.策略模式的目的

将算法的使用与算法的实现分离开来。

3.传统语言中的策略模式和JavaScript中的策略模式对比

3.1.传统语言中的策略模式

使用策略模式来实现计算奖金

var performances = function () { 
   };

performances.prototype.calculate = function (salary) { 
   
    return salary * 4;
};

var performanceA =function () { 
   };

performanceA.prototype.calculate=function (salary) { 
   
    return salary * 3;
};

var performanceB =function () { 
   };

performanceB.prototype.calculate=function (salary) { 
   
    return salary * 2;
};

//定义奖金类Bonus

var Bonus =function () { 
   
    this.salary = null;  //原始工资
    this.strategy = null;//绩效等级对应的策略对象
};

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(10000);
bonus.setStrategy(new performances());//设置策略对象

console.log(bonus.getBonus());

bonus.setStrategy(new performanceA());

console.log(bonus.getBonus());

定义有系列的算法，把它们各自封装成策略类，算法被封装在策略类内部的方法里。在客户端对Context发起请求的时候，Context总是把请求委托给这些策略对象中间的某一个进行计算。

3.2.JavaScript中的策略模式

//封装的策略算法
var strategies={
    "S":function (salary) { 
   
        return salary * 4;
    },
    "A":function (salary) { 
   
        return salary * 3;
    },
    "B":function (salary) { 
   
        return salary * 2;
    }
};


//具体的计算方法
var calculateBonus=function (level, salary) { 
   
    return strategies[level](salary);
};

console.log(calculateBonus('S',1000));
console.log(calculateBonus('A',4000));

使用策略模式重构代码，可以消除程序中大片的条件分支语句。在实际开发中，我们通常会把算法的含义扩散开来，使策略模式也可以用来封装一系列的“业务规则”。只要这些业务规则指向的目标一致，并且可以被替换使用，我们就可以使用策略模式来封装他们。

4.策略模式实现的表单校验

4.1使用JavaScript来实现的一个支持多重校验规则表单校验

//策略对象

var strategies = {
    isNonEmpty: function (value, errorMsg){ 
   
        if (value === '') {
            return errorMsg;
        }
    },
    minLength: function (value, length, errorMg){ 
   
        if (value.length < length) {
            return errorMg;
        }
    },
    isMobile: function (value, errorMsg){ 
   
        if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
            return errorMsg;
        }
    }
};



/** * Validator 类 * @constructor */
var Validator = function (){ 
   
    this.cache = [];
};

Validator.prototype.add = function (dom, 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(dom.value);
                strategyAry.push(errorMsg);
                return strategies[strategy].apply(dom,strategyAry);
            })
        })(rule)
    }
};

Validator.prototype.start=function (){ 
   
    for (var i=0,validatorFunc;validatorFunc=this.cache[i++];){
        var errorMsg=validatorFunc();
        if(errorMsg){
            return errorMsg;
        }
    }
};

//客户端调用的代码

var registerForm=document.getElementById('registerForm');
var validataFunc=function (){ 
   
    var validator=new Validator();

    validator.add(registerForm.userName,[{
        'strategy':'isNonEnpty',
        'errorMsg':'用户名不能为空'
    },{
        'strategy':'minLength',
        'errorMsg':'用户名长度不能小于10位'
    }]);

    // validator.add(registerForm.password,[])

    var errorMsg =validator.start();
    return errorMsg;

};

registerForm.onsubmit=function (){ 
   
    var errorMsg=validataFunc();

    if(errorMsg){
        alert(errorMsg);
        return false;
    }
};