前端须知——行为型模式——策略模式
策略模式是JavaScript设计模式中行为型的设计模式
白话解释
实际上所谓的策略模式就是指根据不同的策略来执行不同的方法，是不是很类似与if-else分支判断；但是策略模式是用来解决多重条件判断语句的；
详解
例子
年终将至，某公司决定提前发年终奖，但是年终奖的计算是有一定的规则的，年终奖的多少跟绩效考核密切相关；所以某公司的年终奖方案是这样的：
-
绩效考核为S的员工，年终奖是个人月工资的4倍；
-
绩效考核为A的员工，年终奖是个人月工资的3倍；
-
绩效考核为B的员工，年终奖是个人月工资的2倍；
看到这里让你开始编写程序，一般大部分的代码是这样的：
function calculateBonus(level,salary){
if(level === 'S'){
return salary*4;
}
if(level === 'A'){
return salary*3
}
if(level === 'B'){
return salary*2
}
}
console.log(calculateBonus("S",14000)); //56000
console.log(calculateBonus("A",10000)); //30000
console.log(calculateBonus("B",5000)); //10000
上面的代码用来解决当前需求固然没有问题，但是在程序设计的角度来说，上面的代码是还有可以优化的点的；
因为该方法相对来说比较庞大，有很多的分支判断，缺乏弹性；
如果年终奖方案改了，需要增加一个C方案呢？那是不是又得去方法里面加分支判断呢？这就违反了开放封闭原则；
优化
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",14000)); //56000
console.log(calculateBonus("A",10000)); //30000
console.log(calculateBonus("B",5000)); //10000
通过优化上述代码之后，上面就是用策略模式来进行改造代码的，我们可以看到我们定义了一个策略对象，然后calculateBonus根据用户传入的等级和工资即可算出年终奖的金额，经过改造之后，代码的结构变得更加简洁；
策略模式的重要应用——表单校验
在web开发中，登录页的注册、登录等功能都是需要进行表单提交的；然而在提交的过程中肯定要进行校验和筛选，不符合校验规则的将不能直接提交；在没有学习设计模式之前我们的校验可能也是跟上面一样都是多重if分支判断，然后我们现在用策略模式来实现一个表单校验：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<form id="registerForm">
请输入用户名：<input type="text" name="userName" /> 请输入密码：
<input type="text" name="password" /> 请输入手机号码：
<input type="text" name="phoneNumber" />
<button>提交button>
form>
body>
<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) {
//将校验规则对象中的strategy属性的值进行分割
var strategyAry = rule.strategy.split(':');
var errorMsg = rule.errorMsg;
self.cache.push(function() {
//将校验规则对象中的strategy属性的第一个值返回回来装进strategy中
var strategy = strategyAry.shift();
//组成参数
strategyAry.unshift(dom.value);
//组装参数
strategyAry.push(errorMsg);
//找到策略对象执行方法装进cache变量中
return strategies[strategy].apply(dom, strategyAry);
});
})(rule);
}
};
//开始校验方法
Validator.prototype.start = function() {
for (var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
//循环cache执行方法校验
var errorMsg = validatorFunc();
//如果执行策略对象方法中返回了errorMsg，就说明方法已经报错（没有通过校验规则）
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: '用户名长度不能小于6位'
}]);
validator.add(registerForm.password, [{
strategy: 'minLength:6',
errorMsg: '密码长度不能小于6 位'
}]);
validator.add(registerForm.phoneNumber, [{
strategy: 'isNonEmpty',
errorMsg: '手机号码不能为空'
}, {
strategy: 'isMobile',
errorMsg: '请输入正确的手机号'
}]);
//调用方法循环执行校验
var errorMsg = validator.start();
return errorMsg;
};
//点击提交按钮（提交事件）
registerForm.onsubmit = function(e) {
//执行上面自定义的校验方法
var errorMsg = validataFunc();
//如果errorMsg存在，即代表校验没有通过
console.log(errorMsg);
if (errorMsg) {
alert(errorMsg);
return false;
}
};
script>
html>
我们可以通过策略模式来解决表单校验大规模重复if-else判断等问题。
总结
策略模式的一个主要思路就是通过定义一系列的算法，然后传入参数，根据不同的参数来执行不同的算法规则；
业务复杂达到一定程度了我们才选用设计模式去解决复杂的问题，扩展性 复用性，冗余度，小的情况没必要使用
优缺点
优点：
-
利用组合、委托和多态技术和思想，可以避免多重条件选择语句；
-
将算法封装在独立的策略类里，使得易于切换，易于理解，易于扩展；
-
策略模式可以复用在系统的其他地方，从而避免重复的复制粘贴工作；
-
在策略模式中利用组合和委托来让Context拥有执行算法的能力，这也是继承的一种更轻便的替代方案。
缺点：
- 程序中会增加许多策略类或者策略对象；
- 使用策略类必须要对所有的策略类算法了解清楚，否则不知道怎么选择。