JS设计模式之状态模式

文章目录
  1. 1. 前言
  2. 2. 正文
    1. 2.1. 状态模式的优缺点
    2. 2.2. 状态模式和策略模式

前言

本文531字,阅读大约需要5分钟。

总括: 在Javascript中实现23种经典设计模式的状态模式。

  • 公众号:「前端进阶学习」,回复「666」,获取一揽子前端技术书籍

书读百遍,其义自见

正文

状态模式(State pattern): 当一个对象的内部状态发生改变时,带来其行为的改变

状态模式也是一种优化判断的设计模式,看下下面这种判断逻辑:

1
2
3
4
5
6
7
8
9
function test(state) {
if (state === 1) {
// ...
} else if (state === 2) {
// ...
} else if (state === 3) {
// ...
}
}

类似的状态判断是比较常见的逻辑判断,如此臃肿的代码带来的后果往往是难以维护,难以进行增删改等操作。

通过状态模式进行优化:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function test(state) {
var states = {
state1() {
console.log('第一种情况');
// ...
},
state2() {
console.log('第二种情况');
// ...
},
state3() {
console.log('第二种情况');
// ...
}
};
states['state' + state] && states['state' + state]();
}

状态模式的优缺点

优点

  • 通过定义状态和行为之间的关系,并将它们封装起来(比如以类或是对象的形式),便于维护且状态切换更为简便;
  • 解决臃肿的if/else代码,使得每一个分支都独立出来一个状态;
  • 避免Context过于臃肿,状态切换的逻辑可以分布在不同的状态类中,也去掉了原本过多的分支判断。

缺点

  • 如果状态复杂,我们需要做声明的状态类会非常庞大,导致无法再同一个地方看到整个状态机的逻辑;

状态模式和策略模式

相同点:

  • 两者都有一个状态对应关系,一个策略或是一个状态类,上下文通过请求某个状态来执行逻辑;

不同点:

  • 状态模式是状态和行为(UI 或是 业务逻辑)的对应关系,策略模式则是状态和算法的映射关系,可以互相替代,甚至可以去切换算法,但状态模式则不能根据状态去互相替代,否则就产生不同的行为后果。

以上。


能力有限,水平一般,欢迎勘误,不胜感激。

转载请获本人授权,并注明作者和出处。

订阅更多文章可关注公众号「前端进阶学习」,回复「666」,获取一揽子前端技术书籍

前端进阶学习

如果您觉得我的文章对您有用,请随意打赏。

您的支持将鼓励我继续创作!

人过留名,雁过留声
听听你的声音

回复 Username 留言: content x