设计模式系列之-策略模式(优化过多代码if…else)-编程知识

设计模式系列之-策略模式(优化过多代码if…else)

首先解释下什么策略模式

如下图：
在这里插入图片描述
简而言之：算法的使用与算法的实现分离开来
想象有一个开关按钮，每次按下去都可以切换不同的灯光模式（例如：强光、柔光、闪烁），这里的每种灯光模式就是一个策略，而开关按钮就像是上下文，它决定了使用哪种灯光模式。这就是策略模式的核心思想。

标题下面上一个简单例子

var calculateBouns = function(salary,level) {if(level === 'A') {return salary * 4;}if(level === 'B') {return salary * 3;}if(level === 'C') {return salary * 2;}
};
// 调用如下：
console.log(calculateBouns(4000,'A')); // 16000
console.log(calculateBouns(2500,'B')); // 7500

函数内部包含过多if…else时候就可以用策略模式来优化
如下：

var obj = {"A": function(salary) {return salary * 4;},"B" : function(salary) {return salary * 3;},"C" : function(salary) {return salary * 2;} 
};
var calculateBouns =function(level,salary) {return obj[level](salary);
};
console.log(calculateBouns('A',10000)); // 40000

比如实现一个表单校验的代码，常常会像如下写法：

var registerForm = document.getElementById("registerForm");
registerForm.onsubmit = function(){if(registerForm.userName.value === '') {alert('用户名不能为空');return;}if(registerForm.password.value.length < 6) {alert("密码的长度不能小于6位");return;}if(!/(^1[3|5|8][0-9]{9}$)/.test(registerForm.phoneNumber.value)) {alert("手机号码格式不正确");return;}
}

使用策略模式进行重构校验：
1.首先写出需要使用的策略算法

var strategy = {isNotEmpty: function(value,errorMsg) {if(value === '') {return errorMsg;}},// 限制最小长度minLength: function(value,length,errorMsg) {if(value.length < length) {return errorMsg;}},// 手机号码格式mobileFormat: function(value,errorMsg) {if(!/(^1[3|5|8][0-9]{9}$)/.test(value)) {return errorMsg;}} 
};

2.然后判断使用的场景

var Validator = function(){this.cache = [];  // 保存效验规则
};
Validator.prototype.add = function(dom,rule,errorMsg) {var str = rule.split(":");this.cache.push(function(){// str 返回的是 minLength:6 var strategy = str.shift();str.unshift(dom.value); // 把input的value添加进参数列表str.push(errorMsg);  // 把errorMsg添加进参数列表return strategys[strategy].apply(dom,str);});
};
Validator.prototype.start = function(){for(var i = 0, validatorFunc; validatorFunc = this.cache[i++]; ) {var msg = validatorFunc(); // 开始效验 并取得效验后的返回信息if(msg) {return msg;}}
};

var validateFunc = function(){var validator = new Validator(); // 创建一个Validator对象/* 添加一些效验规则 */validator.add(registerForm.userName,'isNotEmpty','用户名不能为空');validator.add(registerForm.password,'minLength:6','密码长度不能小于6位');validator.add(registerForm.userName,'mobileFormat','手机号码格式不正确');var errorMsg = validator.start(); // 获得效验结果return errorMsg; // 返回效验结果
};
var registerForm = document.getElementById("registerForm");
registerForm.onsubmit = function(){var errorMsg = validateFunc();if(errorMsg){alert(errorMsg);return false;}
}