策略模式
定义：定义一系列的算法，把他们一个个封装起来，并且使他们可以相互替换
看一个例子（取自 js 设计模式与开发实践）
例如，绩效为 S 的人年终奖是 4 倍工资，绩效为 A 的人年终奖是 3 倍工资，绩效为 B 的人年终奖是 2 倍工资
看一段代码
var bonus = function (level, salary) {
if (level === "S") {
return salary * 4;
}
if (level === "A") {
return salary * 3;
}
if (level === "B") {
return salary * 2;
}
};
bonus("S", 1000);
这段代码的问题在哪里，有很多的 if,函数缺乏弹性，如果再添加一种绩效，则需要深入函数内部，修改函数，所以我们看看使用策略模式后代码
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", 20000)); // 输出：80000
console.log(calculateBonus("A", 10000)); // 输出：30000
这样算法的使用和算法的实现就分离开了，相互不再影响
代码看着很简单，能否想到用策略模式来优化代码，以及实现，我想这需要一定的积累才能达到。
再看一个例子加强一下（取自 js 设计模式与开发实践）
表单校验
<html>
<body>
<form action="http:// xxx.com/register" id="registerForm" method="post">
请输入用户名：<input type="text" name="userName" /> 请输入密码：<input
type="text"
name="password"
/>
请输入手机号码：<input type="text" name="phoneNumber" />
<button>提交</button>
</form>
<script>
var registerForm = document.getElementById("registerForm");
registerForm.onsubmit = 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;
}
};
</script>
</body>
</html>
没有使用策略设计模式，代码中依然存在很多的 if (这给我们一个提示，如果我们写的代码含有大量的 if else 那么我们是不是可以用策略模式来优化我们的代码呢？，也许以后我们遇到的时候可以停下来思考一下是否可以优化)
使用策略模式后的代码
<html>
<body>
<form action="http:// xxx.com/register" id="registerForm" method="post">
请输入用户名：<input type="text" name="userName" /> 请输入密码：<input
type="text"
name="password"
/>
请输入手机号码：<input type="text" name="phoneNumber" />
<button>提交</button>
</form>
<script>
/***********************策略对象**************************/
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 类**************************/
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: "isNonEmpty",
errorMsg: "用户名不能为空",
},
{
strategy: "minLength:6",
errorMsg: "用户名长度不能小于10 位",
},
]);
validator.add(registerForm.password, [
{
strategy: "minLength:6",
errorMsg: "密码长度不能小于6 位",
},
]);
var errorMsg = validator.start();
return errorMsg;
};
registerForm.onsubmit = function () {
var errorMsg = validataFunc();
if (errorMsg) {
alert(errorMsg);
return false;
}
};
</script>
</body>
</html>
这段代码，建议多阅读几遍，体会一下策略模式
网友评论