有限状态机与JavaScript

有限状态机与JavaScript

有限状态机是一种很有用的编程模型,简单来说,我理解的有限状态机一个显著的作用是降低if/else以及switch语法在复杂情况下带来的影响.

几个基本概念

• 状态总数（state）是有限的。
• 任一时刻，只处在一种状态之中。
• 某种条件下，会从一种状态转变（transition）到另一种状态。

先看一个水状态转换的例子:

648B8BDACB275383BA7185238765BE5B.png

如果用ifelse表述上图的话,要写好多层级.如果是用状态机来描述的话,可能要更简单一些.

var 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') }
    }
  });

使用:

fsm.melt();//I melted
fsm.vaporize();//I vaporized
fsm.condense();//I condensed
fsm.freeze();//I froze
console.log(fsm.state);//solid

非法转换,报出异常

fsm.melt();//I melted
fsm.condense();//error

1. 状态:水有固态,液态,汽态
2. 转变:融化,结冰,汽化,液化
3. 事件:可以有onBeforeMelt/onAfterMelt等事件

优点:

1. 交互逻辑清晰,代码分层,我们只需要关心状态图的维护
2. 利于维护测试,这个图可以说是和测试需求结合的比较紧密的,如果有非法情况就会报出异常

JavaScript使用的相关类库是javascript-state-machine ,它还支持异步和