Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推荐 https://github.com/pingan8787/Leo_Reading/issues
微信公众号 前端自习课

五、策略模式(Strategy Pattern)

1.概念介绍

策略模式(Strategy Pattern):封装一系列算法,支持我们在运行时,使用相同接口,选择不同算法。它的目的是为了将算法的使用与算法的实现分离开来

策略模式通常会有两部分组成,一部分是策略类,它负责实现通用的算法,另一部分是环境类,它用户接收客户端请求并委托给策略类。

2.优缺点

2.1优点

  • 有效地避免多重条件选择语句;
  • 支持开闭原则,将算法独立封装,使得更加便于切换、理解和扩展;
  • 更加便于代码复用;

2.2缺点

  • 策略类会增多;
  • 所有策略类都需要对外暴露;

3.基本案例

我们可以很简单的将策略和算法直接做映射:

1
2
3
4
5
6
7
8
let add = {
"add3" : (num) => num + 3,
"add5" : (num) => num + 5,
"add10": (num) => num + 10,
}
let demo = (type, num) => add[type](num);
console.log(demo('add3', 10)); // 13
console.log(demo('add10', 12)); // 22

然后我们再把每个策略的算法抽出来:

1
2
3
4
5
6
7
8
9
10
11
12
let fun3  = (num) => num + 3;
let fun5 = (num) => num + 5;
let fun10 = (num) => num + 10;
let add = {
"add3" : (num) => fun3(num),
"add5" : (num) => fun5(num),
"add10": (num) => fun10(num),
}
let demo = (type, num) => add[type](num);
console.log(demo('add3', 10)); // 13
console.log(demo('add10', 12)); // 22

4.表单验证案例

我们需要使用策略模式,实现一个处理表单验证的方法,无论表单的具体类型是什么都会调用验证方法。我们需要让验证器能选择最佳的策略来处理任务,并将具体的验证数据委托给适当算法。

我们假设需要验证下面的表单数据的有效性:

1
2
3
4
5
let data = {
name : 'pingan',
age : 'unknown',
nickname: 'leo',
}

这里需要先配置验证器,对表单数据中不同的数据使用不同的算法:

1
2
3
4
5
validator.config = {
name : 'isNonEmpty',
age : 'isNumber',
nickname: 'isAlphaNum',
}

并且我们需要将验证的错误信息打印到控制台:

1
2
3
4
validator.validate(data);
if(validator.hasErrors()){
console.log(validator.msg.join('\n'));
}

接下来我们才要实现validator中具体的验证算法,他们都有一个相同接口validator.types,提供validate()方法和instructions帮助信息:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 非空值检查
validator.types.isNonEmpty = {
validate: function(value){
return value !== '';
}
instructions: '该值不能为空'
}

// 数值类型检查
validator.types.isNumber = {
validate: function(value){
return !isNaN(value);
}
instructions: '该值只能是数字'
}

// 检查是否只包含数字和字母
validator.types.isAlphaNum = {
validate: function(value){
return !/[^a-z0-9]/i.test(value);
}
instructions: '该值只能包含数字和字母,且不包含特殊字符'
}

最后就是要实现最核心的validator对象:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
let validator = {
types: {}, // 所有可用的检查
msg:[], // 当前验证的错误信息
config:{}, // 验证配置
validate: function(data){ // 接口方法
let type, checker, result;
this.msg = []; // 清空错误信息
for(let k in data){
if(data.hasOwnProperty(k)){
type = this.config[k];
checker = this.types[type];
if(!type) continue; // 不存在类型 则 不需要验证
if(!checker){
throw {
name: '验证失败',
msg: `不能验证类型:${type}`
}
}
result = checker.validate(data[k]);
if(!result){
this.msg.push(`无效的值:${k}${checker.instructions}`);
}
}
}
return this.hasErrors();
}
hasErrors: function(){
return this.msg.length != 0;
}
}

总结这个案例,我们可以看出validator对象是通用的,需要增强validator对象的方法只需添加更多的类型检查,后续针对每个新的用例,只需配置验证器和运行validator()方法就可以。

5.小结

日常开发的时候,还是需要根据实际情况来选择设计模式,而不能为了设计模式而去设计模式。通过上面的学习,我们使用策略模式来避免多重条件判断,并且通过开闭原则来封装方法。我们应该多在开发中,逐渐积累自己的开发工具库,便于以后使用。

参考资料

  1. 《JavaScript Patterns》

本部分内容到这结束

Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推荐 https://github.com/pingan8787/Leo_Reading/issues
JS小册 js.pingan8787.com
微信公众号 前端自习课

bg