策略模式：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。
在使用策略模式的过程中，选择某种策略，不再将使用if或者switch来进行判断，而是将策略的选择过程交给语言本身，并且对每一种的策略能做到在不修改原有结构上进行策略的更换。
- 使用if：
if(userName === '') {
alert('用户名不能为空');
console.log(false);
}
- 使用策略模式：
let strategies = {
isNonEmpty: function (value, errorMsg) {
if (value === '') {
return errorMsg;
}
}
}
let resulet = strategies['isNonEmpty'](dom, userName, errorMsg)
console.log(result);
使用策略模式实现策略的增删以及动态配置表单验证。
<form id="registerForm" method="POST">
请输入用户名：<input type="text" name="userName"/>
请输入密码：<input type="text" name="password"/>
请输入手机号：<input type="text" name="phoneNumber"/>
<button>提交</button>
</form>
// 获取DOM节点
let registForm = document.getElementById('registerForm');
// 定义策略,策略可进行配置
let strategies = new Map();
strategies.set('isNonEmpty', function (value, errorMsg) {
if (value === '') {
return errorMsg;
}
});
strategies.set('minLength', function (value, length, errorMsg) {
if (value.length < length) {
return errorMsg;
}
})
strategies.set('isMobile', function (value, errorMsg) {
if (!/^1[3|5|8][0-9]{9}$/.test(value)) {
return errorMsg;
}
})
// 定义验证器对象，cache用于储存需要验证的内容
let Validator = function () {
this.cache = [];
};
// 定义添加验证内容的方法
Validator.prototype.add = function (dom, rule, errorMsg) {
let ary = rule.split(':');
this.cache.push(function () {
let strategy = ary.shift()
ary.unshift(dom.value);
ary.push(errorMsg);
//使用策略模式，根据strategy的值选择使用哪一个策略模式
return strategies.get(strategy).apply(dom, ary);
})
}
Validator.prototype.start = function () {
for (let i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
let msg = validatorFunc();
if (msg) {
return msg;
}
}
}
let validator = new Validator();
//添加两个用户名的规则
validator.add(registForm.userName, 'isNonEmpty', '用户名不能为空');
validator.add(registForm.userName, 'minLength:10', '用户名长度不能小于10位');
// 还可添加其他规则：
// validator.add(registForm.password, 'minLength:6', '密码长度不能少于6位');
// validator.add(registForm.phoneNumber, 'isMobile', '手机号码格式不正确');
registForm.onsubmit = function () {
let errorMsg = validator.start();
if (errorMsg) {
alert(errorMsg);
}
};
既然能动态调用算法，也可以动态渲染组件，比如VueRouter，采用策略模式，根据路由来动态渲染组件，或者Vue中的插槽slot等等动态选择的问题，有点类似于Map的思想。
策略模式是行为型模式，策略模式解决的主要是“选择”行为，将“选择”这个行为封装起来，将选择的过程交给语言本身，而非仅仅通过代码的条件语句来决定选择哪一种策略。
