学习JavaScript设计模式之策略模式
把不变的部分和变化的部分隔开是每个设计模式的主题。
- 条条大路通罗马。我们经常会遇到解决一件事情有多种方案，比如压缩文件，我们可以使用zip算法、也可以使用gzip算法。其灵活多样，我们可以采用策略模式解决。
一、定义
定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。
基于策略类模式的程序至少由两部分组成。第一个部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程。第二个部分是环境类Context，Context接收客户的请求，随后把请求委托给某一个策略类。
二、示例
计算奖金。绩效为S的发放4倍工资，绩效为A的发放3倍工资，绩效为B的发放2倍工资。
varstrategies={
"S":function(salary){
returnsalary*4;
},
"A":function(salary){
returnsalary*3;
},
"B":function(salary){
returnsalary*2;
}
};
//接收请求
varcalculateBonus=function(level,salary){
returnstrategies[level](salary);
};
//测试
console.log(calculateBonus("S",20000));
console.log(calculateBonus("A",20000));
console.log(calculateBonus("B",20000));
三、延伸：表单验证
/*校验策略对象*/
varvalidateStrategies={
isEmpty:function(val,errorMsg){
if(!val){
returnerrorMsg;
}
},
isURL:function(val,errorMsg){
if(!newRegExp("^(http:\\/\\/|https:\\/\\/)?([\\w\\-]+\\.)+[\\w\\-]+(\\/[\\w\\-\\.\\/?\\@\\%\\!\\&=\\+\\~\\:\\#\\;\\,]*)?$").test(val)){
returnerrorMsg;
}
},
isEmail:function(val,errorMsg){
if(!newRegExp('\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+').test(val)){
returnerrorMsg;
}
},
isMaxLength:function(val,length,errorMsg){
if(val.length>length){
returnerrorMsg;
}
},
isMinLength:function(val,length,errorMsg){
if(val.length<length){
returnerrorMsg;
}
}
};
/*validator类*/
varvalidator=function(){
//缓存验证策略
this.cache=[];
};
/**
*添加要验证的策略
*@paramdom要验证的dom元素
*@paramrules验证规则
*/
validator.prototype.add=function(dom,rules){
varself=this;
for(vari=0,rule;rule=rules[i++];){
(function(rule){
varstrategyAry=rule.strategy.split(":");//["isMaxLength","10"]
varerrorMsg=rule.errorMsg;//"内容长度不能超过10"
self.cache.push(function(){
varstrategy=strategyAry.shift();//"isMaxLength"
strategyAry.unshift(dom.value);//["1@qq","10"]
strategyAry.push(errorMsg);//["1@qq","10","内容长度不能超过10"]
returnvalidateStrategies[strategy].apply(dom,strategyAry);
});
})(rule);
}
};
/*开始校验*/
validator.prototype.start=function(){
for(vari=0,validateFunc;validateFunc=this.cache[i++];){
varerrorMsg=validateFunc();
if(errorMsg){
returnerrorMsg;
}
}
};
//测试
<labelfor="email">邮箱：</label><inputtype="text"name="email"value="1@qq">
varvalidatorInstance=newvalidator();
validatorInstance.add(
document.getElementsByName("email")[0],
[{
strategy:"isEmpty",
errorMsg:"内容不能为空"
},{
strategy:"isMaxLength:10",
errorMsg:"内容长度不能超过10"
},{
strategy:"isEmail",
errorMsg:"email格式不对"
}]);
errorMsg=validatorInstance.start();
希望本文所述对大家学习javascript程序设计有所帮助。