最近在看《javascript设计模式与开发实践》。
var calc = function(level,salary){
if(level === "A"){
return 3*salary
}
if(level === "B"){
return 2*salary
}
if(level === "C"){
return 1*salary
}
}
这段代码看起来十分简单，但是随着后期的拓展，要添加更多的if语句，calc函数会变得更加庞大，不易于维护。
如果我要修改原有的计算分之，可能每次都要修改calc这个方法。实际上，这个calc这个方法的设计初衷只是为了返回 绩效工资。
在整个代码的其它部分，可能还需要这个计算方法，难道还要copy一份过去么，那么同样的修改要修改两块代码。
用策略模式来重构代码
策略模式指的是定义一系列的算法，把他们一个个都封装起来。将不变的部分和变化的部分分割开始每个设计模式的主题，策略模式的目的就是将算法的使用与算法的实现分离开来。
再说上边的需求，我们简单思考下，其实变化的部分就是员工的等级和工资,而我们的目的就是返回绩效工资这部分是不变的
// 根据员工的level和salary 金额的计算
var straigies = {
“A”: function(salary){
return fn*3
},
“B”: function(salary){
return fn*2
},
“C”: function(salary){
return fn*1
}
}
//不变的部分
var calc = function(level,salary){
return straigies[level](salary)
}
// 执行
calc("A",5000) // => 15000
比较下两段代码，不见了不友好的 if判断，算法(策略)都放在了straigies 中，后续需求 只需要维护straigies对象即可。
- 用策略模式来重构表单验证
很多需要提交表单的业务场景，都需要如下结构的代码
$('submitBtn').on('click',functioin(){
if($name.value().length < 6){
console.log("用户名长度不能少于6")
}
if($phone.value() != ''){
console.log("电话号码不能为空")
}
ajaxFn()
})
随着 判断条件的增加，函数的结构会越来越臃肿庞大，而需要修改判断的条件，就又要深入指定的if判断去筛选，单纯的新增规则在这个函数里，复用性太差。结合策略模式，可以把if判断这一部分 函数里提取出来重新封装，提高代码的复用性和可读性。
对代码结构的期望
$('submitBtn').on('click',functioin(){
var form = document.querySelector('.form');
var validator = new validator ();
validator.addrules(form.username,"isNonEmpty","不能为空")
validator.addrules(form.phone,"minLength:6","最少为6位")
var erroMsg = validator.start();
if(erroMsg){
alert(validator);
return false
}
ajaxFn()
})
我们先封装策略类
var stratigies = {
isNonEmpty: function(value,erromsg){
if(value == ""){
return erromsg
}
},
minlength: function(value,length,erromsg){
if(value.length < length){
return erromsg
}
}
}
封装 验证(validator类)
var Validator = function(){
this.cache = [] //用来缓存
}
Validator.prototype.add = function(item,rule,erroMsg){
var arg = rule.split(":") // rule= > "isEmpty" => ["isEmpty"] || "minLength:5"=> ["minlength", “5”];
this.cache.push(function(){
var strategy = arg.shift(); // =>"isEmpty" || minLength
arg.unshift(item.value); //[value] || [value,5]
arg.push(errMsg)// [value,errMsg] || [value,5,errMsg]
return stratigies[strategy].apply(item,arg)
})
}
//start方法就是遍历这个Validator里缓存的方法并执行
Validator.prototype.start = function(){
for(var i=0;i<this.cache.length;i++){
var fn = this.cache[i];
var msg = fn() // =>开始校验，
if(msg){
return msg // 如果msg有值 就说明验证不通过，跳出循环
}
}
}
此时，如果需要添加规则 或是修改验证规则,就很简单了
我们可以在stratigies里添加策略，也可以在 提交表单的函数里，新增或者修改规则
validator.addrules(form.phone,"minLength:6") =》 validator.addrules(form.phone,"minLength:10")
很蛋疼的是，对用户名判断只能一次输入一种规则，如果需要加一种判断规则，我就要在add一次strategy,
书中提供了进一步的拓展。
//预期
validator.addrules(form.username,[
{
"erroMsg": "不能为空",
"strategy": 'isNonEmpty'
},
{
"erroMsg": "最小为6位",
"strategy": 'minLength:6'
}
])
将策略用数组的方式传入validator对象里，缓存在this.cache里,只需要调整对应的add方法就可以
//old type
Validator.prototype.add = function(item,rule,erroMsg){
var arg = rule.split(":") // rule= > "isEmpty" => ["isEmpty"] || "minLength:5"=> ["minlength", “5”];
this.cache.push(function(){
var strategy = arg.shift(); // =>"isEmpty" || minLength
arg.unshift(item.value); //[value] || [value,5]
arg.push(errMsg)// [value,errMsg] || [value,5,errMsg]
return stratigies[strategy].apply(item,arg)
})
}
// new Type
Validator.prototype.add = function(item,rules){
var _this = this; //保存this指针 for循环里的的自执行函数的this指向window，用_this修复指针
//遍历rules
for(var i = 0;i<rules.length;i++){
var rule = rules[i];
(function(rule ){
var arg = rule.strategy.split(":") // rule= > "isEmpty" => ["isEmpty"] || "minLength:5"=> ["minlength", “5”];
var errMsg = rule.errMsg;
_this.cache.push(function(){
var strategy = arg.shift(); // =>"isEmpty" || minLength
arg.unshift(item.value); //[value] || [value,5]
arg.push(errMsg)// [value,errMsg] || [value,5,errMsg]
return stratigies[strategy].apply(item,arg)
})
})(rule)
}
}
