js 策略模式
例如,很多公司的年终奖是根据员工的工资基数和年底绩效情况来发放的.例如,绩效为s的人年终奖有4倍工资,
绩效为A的人年终奖有3倍工资,而绩效为B的人年终奖是2倍工资.
最初思路
编写一个calculateBonus的函数来计算每个人的奖金数额.
这个函数,接受两个参数:员工的工资数额和他的绩效考核等级.
var calculateBonus = function(performanceLevel,salary){
if(performanceLevel === 'S'){
return salary * 4;
}
if(performanceLevel === 'A'){
return salary * 3;
}
if(performanceLevel === 'B'){
return salary * 2;
}
}
calculateBonus('B',20000);
calculateBonus('S',10000);
缺点:
calculateBonus函数比较庞大,包含了很多的if-else语句,这些语句需要覆盖所有的逻辑分支
calculateBonus函数缺乏弹性,如果再增加一种新的绩效考核,我们必须修改函数内部实现.
这违反了开放-封闭原则
算法的复用性差,如果在程序的其它地方需要重用这些计算奖金的算法,我们的复制过去;使用组合函数重构代码
一般最容易想到的办法就是使用组合函数来重构代码,我们把各种算法封装到一个个的小函数里面,
这些小函数有良好的命名,可以一目了然地知道它对应哪种算法,它们可以复用到程序的其它地方: var performanceS = function(salary){
return salary * 4;
}
var performanceA = function(salary){
return salary * 3;
}
var performanceB = function(salary){
return salary * 2;
}
var calculateBons = function(performanceLevel,salary){
if(performanceLevel === 'S'){
return performanceS(salary)
}
if(performanceLevel === 'A'){
return performanceA(salary)
}
if(performanceLevel === 'B'){
return performanceB(salary)
}
}
console.log(calculateBons('A',10000));目前,虽然程序上得到一定程度上的改善,但是这种改善风格有限,问题仍然存在:
calculateBons 函数有可能越来越大,而且在系统变化的时候缺乏弹性.
使用策略模式重构代码
策略模式指的是定义一系列的算法,把它们封装起来.目的就是将算法的使用与算法的实现分离出来
一个基于策略模式的程序至少由两部分组成.第一部分是一组策略类,封装了具体的算法,并负责具体的计算过程;
第二部分是环境类Context,Context接受用户的请求,随后把请求委托给某一个策略类. 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;
}
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 bouns = new Bonus();
bouns.setSalary(10000);
bouns.setStrategy(new performanceS());//设置策略对象
console.log(bouns.getBonus());我们让strategy对象从各个策略类中创建而来,这是模拟一些传统面向对象实现.
实际上,在js中,函数也是对象,所以更简单和直接的做法是把strategy直接定义为函数; var strategies = {
'S':function(salary){
return salary * 4;
},
'A':function(salary){
return salary * 3;
},
'B':function(salary){
return salary * 2;
}
};
/*
同样,Context也没有必要用Bonus类来表示,我们已然用calculateBonus函数充当Context来接受用户的请求
* */
var calculateBonus = function(level,salary){
return strategies[level](salary);
};
console.log(calculateBonus('S',20000));接下来，我们用策略模式重构表单验证 var $btn = document.getElementsByTagName('button')[0],
$registerForm = document.getElementById('registerForm');
$btn.onclick = function(){
if($registerForm.userName.value === ''){
alert('用户名不能为空');
return false;
}
if($registerForm.password.value.length < 6){
alert('密码长度不能少于6位');
return false;
}
if(!/(^1[3|5|8][0-9]{9}$)/.test( $registerForm.phoneNumber.value ) ){
alert('手机号码格式不正确');
return false;
}
}这是一种常见的代码编写方式,缺点如下
"
$btn.onclick函数比较庞大,包含了很多的if-else语句,这些语句覆盖了所有的校验规则
$btn.onclick函数缺乏弹性,如果增加了一种新的校验规则,或者想把密码的长度校验从6改成8,
都必须深入函数内部去修改,这是违反了开放-封闭原则;
算法的复用性差,如果在程序中增加了另外一个表单,得复制过去;
用策略模式重构表单校验
很显然第一部要把这些校验逻辑都封装成策略对象: var strategies = {
isNonEmpty:function(value,errorMsg){// 不为空
if(value === ''){
return errorMsg;
}
},
minLength:function(value,length,errorMsg){// 限制最小长度
if(value.length < length){
return errorMsg;
}
},
isMobile:function(value,errorMsg){// 手机号码格式
if(!/(^1[3|5|8][0-9]{9}$)/.test( value )){
return errorMsg;
}
}
}接下来我们实现Validator类,Validator类在这里我们作为Context,负责接受用户的请求
并委托给strategy对象.在给出Validator类的代码前,有必要提前了解用户是如何向Validator类发送请求的,
有助于我们知道如何去编写Validator类的代码 var validataFunc = function(){
var validator = new Validator();//创建一个validator对象
/**添加一些校验规则**/
validator.add(document.getElementById('userName'),'isNonEmpty','用户名不能为空');
validator.add(document.getElementById('password'),'minLength:10','密码长度不能少于10位');
validator.add(document.getElementById('phoneNumber'),'isMobile','手机号码格式不正确');
var errorMsg = validator.start();//获得校验结果
return errorMsg;
};
$btn.onclick = function(){
var errorMsg = validataFunc();// 如何errorMsg有确切的返回值,说明未通过校验
if(errorMsg){
alert(errorMsg);
return false;//阻止表单提交
}
};可以看到,我们先创建了一个validator对象,然后通过validator.add方法,往validator对象中添加一些校验规则,
validator.add方法接受3个参数,
'minLength:6'是一个以冒号隔开的字符串;
当往validator对象里添加完一系列的校验规则之后,会调用validator.
start()方法来启动校验.
如果validator.
start()返回一个确切的errorMsg字符串当作返回值,说明该校验没通过,
此时阻止表单提交
最后就是Validator类的实现 var Validator = function(){
this.cache = []; //保存校验规则
};
Validator.prototype.add = function( dom, rule, errorMsg ) {
var ary = rule.split(':'); //把strategy和参数分开
this.cache.push(function () { //把校验的步骤用空函数包装起来,并且放入cache
var strategy = ary.shift();// 用户挑选的strategy
ary.unshift(dom.value);//把input的value添加进参数列表
ary.push(errorMsg); //把errorMsg添加参数列表
return strategies[strategy].apply(dom, ary);
});
};
Validator.prototype.start = function(){
console.log(this.cache);
for ( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){
var msg = validatorFunc();// 开始校验,并取得校验后的返回信息
if ( msg ){// 如果有确切的返回值,说明校验没有通过;
return msg;
}
}
};
