有限状态自动机的应用场景 (javascript)

有限状态自动机的应用场景

状态机是有限状态自动机的简称。是用来描述事物有限个状态之间，相互切换的数学模型。

• state: 状态，一个状态机至少有两个状态
• event: 事件，执行某个操作的触发条件
• action: 动作，表示事件执行后，即将执行动作
• transtion: 变换，状态之间的相互切换

思考: 抽奖组件，如何可以抽象成一个状态机。

1. 状态

• start (未抽奖时，正常滚动)
• ongoing_run_scroll (抽奖进行中，转盘快速滚动)
• ongoing_stop_scroll (抽奖进行中，转盘停止滚动)
• ongoing_run_marquee (抽奖进行中，跑马灯快速转动)
• stop (抽奖结束，跑马灯结束转动)
• restart (抽奖结束，重启正常滚动动画)

2. 事件

• 转盘正常滚动
• 点击立即抽奖

3. 动作

• 转盘正常滚动
• 转盘快速滚动
• 转盘停止滚动
• 跑马灯快速转动
• 跑马灯停止转动

4. 变换

• 转盘由正常->快速滚动
• 转盘由快速->停止滚动
• 转盘停止滚动->跑马灯快速转动
• 跑马灯快速转动->跑马灯停止转动
• 跑马灯停止转动->转盘正常滚动

伪代码如下:

/**
 * 抽奖组件
 **/
class Turntable {
  constructor(options) {
    super()
    this.optons = options
  }
  // 定义状态
  this.currentState = "start"
  // 初始化状态
  init() {
    this.currentState = "start"
  }
  // 定义事件
  start() {
    // 重置状态
    this.init()
    // 开始滚动
    // ...
  }
  onGoingRunScroll() {
    // 点击立即抽奖
    // 1.转盘由正常->快速滚动
    this.currentState = 'ongoing_run_scroll'
    // ...
    this.onGoingStopScroll()
  }
  onGoingStopScroll() {
    // 2.转盘由快速->停止滚动
    this.currentState = 'ongoing_stop_scroll'
    // ...
    this.onGoginRunMarquee()
  }
  onGoginRunMarquee() {
    // 3.转盘停止滚动->跑马灯快速转动
    tihs.currentState = 'ongoing_run_marquee'
    // ...
    this.stop()
  }
  stop() {
    // 4.跑马灯快速转动->跑马灯停止转动
    tihs.currentState = 'stop'
    // ...
    this.restart()
  }
  restart() {
    // 5.跑马灯停止转动->转盘正常滚动
    tihs.currentState = 'restart'
    // ...
    this.start()
  }
}

梳理完结构之后，发现状态之间切换清晰，每个函数，只需要处理当前状态的事务。状态之间也不会相互影响。