js有限状态机

有限状态机

百度给出的定义:

有限状态机,(英语:Finite-state machine, FSM),又称有限状态自动机,简称状态机,是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。

简单来说,它有三个特征:

  • 状态的总数是有限的
  • 任一时刻,只处在一种状态之中
  • 在某些条件下,会从一种状态改变到另一种状态

javascript中,很多状态多,事件多的对象可以写成有限状态机,通过将对象描述为有限状态机,可以使代码逻辑性更强,阅读起来更方便

下面我们结合有限状态机的函数库Javascript Finite State Machine,通过代码来帮助我们加深理解

javascript-state-machine

· javascript-state-machine

安装

1
npm install --save-dev javascript-state-machine

用法

我们通过构造函数,生成一个有限状态机的实例

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
const StateMachine = require('javascript-state-machine');
let fsm = new StateMachine({
init: 'solid',
transitions: [
{name: 'melt', from: 'solid', to: 'liquid'},
{name: 'freeze', from: 'liquid', to: 'solid'},
{name: 'vaporize', from: 'liquid', to: 'gas'},
{name: 'condense', from: 'gas', to: 'liquid'}
],
methods: {
onMelt: function () {
console.log('I melted')
},
onFreeze: function () {
console.log('I froze')
},
onVaporize: function () {
console.log('I vaporized')
},
onCondense: function () {
console.log('I condensed')
}
}
});

我们可以用过 state 来访问 fsm 当前的状态

1
fsm.state // solid

当我们调用 transition 中的方法时,method 中定义的观察函数可以自动的被调用

1
2
3
4
5
6
fsm.melt();
// fsm.freeze();
fsm.vaporize();
fsm.condense();
console.log(fsm.state);

以上代码的输出结果为

1
2
3
4
I melted
I vaporized
I condensed
liquid

不难看出,这种通过状态改变来驱动操作的方式,比起回调函数,事件监听以及 发布订阅等解决方案,在逻辑上更合理,更易于降低代码的复杂度。

0%