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

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

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

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

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

  1. 状态
  • start (未抽奖时,正常滚动)
  • ongoing_run_scroll (抽奖进行中,转盘快速滚动)
  • ongoing_stop_scroll (抽奖进行中,转盘停止滚动)
  • ongoing_run_marquee (抽奖进行中,跑马灯快速转动)
  • stop (抽奖结束,跑马灯结束转动)
  • restart (抽奖结束,重启正常滚动动画)
  1. 事件
  • 转盘正常滚动
  • 点击立即抽奖
  1. 动作
  • 转盘正常滚动
  • 转盘快速滚动
  • 转盘停止滚动
  • 跑马灯快速转动
  • 跑马灯停止转动
  1. 变换
  • 转盘由正常->快速滚动
  • 转盘由快速->停止滚动
  • 转盘停止滚动->跑马灯快速转动
  • 跑马灯快速转动->跑马灯停止转动
  • 跑马灯停止转动->转盘正常滚动

伪代码如下:

/**
 * 抽奖组件
 **/
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()
  }
}

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

你可能感兴趣的:(Web前端,算法,算法专栏)