策略模式
策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。
例子1:
很多公司的年终奖是根据员工的工资基数和年底绩效情况来发放的。例如,绩效为 S的人年终奖有 4倍工资,绩效为 A的人年终奖有 3倍工资,而绩效为 B的人年终奖是 2倍工资。假设财务部要求我们提供一段代码,来方便他们计算员工的年终奖。
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
例子2
假设我们正在编写一个注册的页面,在点击注册按钮之前,有如下几条校验逻辑。
用户名不能为空。
密码长度不能少于 6位。
手机号码必须符合格式。
<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 位"
}]);
validator.add(registerForm.phoneNumber, [{
strategy: "isMobile",
errorMsg: "手机号码格式不正确"
}]);
var errorMsg = validator.start();
return errorMsg;
};
registerForm.onsubmit = function() {
var errorMsg = validataFunc();
if (errorMsg) {
alert(errorMsg);
return false;
}
};
</script>
</body>
</html>