Fork me on GitHub

前端设计模式之【策略模式】

设计模式之策略模式!

策略模式

策略模式主要注重良好代码的「编程习惯」和「重构意识」。

一、最常见的场景——(if-else)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function askPrice(tag, originPrice) {

if(tag === '1') {
// 处理的业务1
return 结果
}

if(tag === '2') {
// 处理的业务2
return 结果
}

if(tag === '3') {
// 处理的业务3
return 结果
}

if(tag === '4') {
// 处理的业务4
return 结果
}

}

分析一下上边应用场景出现的问题:

  • 违背了设计模式中的“单一职责原则”。一个函数处理了多个功能的代码块,第一,导致除了问题无法快速定位,代码块的代码太零散,如果有函数,直接断点跳到该功能函数中;第二,单一的功能没有被抽离,代码从头一下撸到底。
  • 违背了设计模式中的“开放封闭式原则”。第一,每次增加一个功能还是要修改原来的函数体,没有实现“对扩展开放,对修改封闭”的效果。第二,不仅自己开发麻烦,而且测试功能的时候会连累其他测试人员,进行一次回归测试要全部把该函数的功能全部测试一遍。

二、策略模式的重构

2.1 单一职责改进

每个函数只负责一个功能实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function gongneng1(){
// 处理的业务1
}

function gongneng2(){
// 处理的业务2
}

function gongneng3(){
// 处理的业务3
}

function gongneng4(){
// 处理的业务4
}

改进优点:

  • 定位 bug 精准 —— 断点直接知道逻辑中那个函数出现了问题。
  • 函数的复用 —— 每个功能函数都可以进行复用,不会出现整块代码的赋值粘贴。
  • 最大程度的对该函数的功能进行了最大程度的解耦。

2.2 开放封闭式原则改造

我们有新的功能需要添加到该函数中,一般我们先创建该功能函数,然后加到判断函数中去,这样做,修改了 if-else 的函数体,违背了“对扩展开放,对修改封闭”的效果。

其实在 if_else 函数中,完成的功能就是不同功能标签不同功能之间的映射。我们在完成映射功能的同时也不改变代码的结构——对象映射

1、将单个的功能写到对象中去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const Processor = {
gongneng1:function(){
//业务一
}
gongneng2:function(){
//业务二
}
gongneng3:function(){
//业务三
}
gongneng4:function(){
//业务四
}
}

2、然后将标签与功能对应上(映射)。

1
2
3
function yingshe(tag) {
return Processor[tag]()
}

3、新增加功能扩展

1
2
3
Processor.gongneng5 = function(){
// 扩展的新功能
}

这样写完新功能代码之后,老功能的测试代码完全不用全部测试,而是只测试新功能就可以了。代码瞬间变的容易阅读。