有限状态自动机的应用场景
状态机是有限状态自动机的简称。是用来描述事物有限个状态之间,相互切换的数学模型。
- state: 状态,一个状态机至少有两个状态
- event: 事件,执行某个操作的触发条件
- action: 动作,表示事件执行后,即将执行动作
- transtion: 变换,状态之间的相互切换
思考: 抽奖组件,如何可以抽象成一个状态机。
- 状态
start
(未抽奖时,正常滚动)ongoing_run_scroll
(抽奖进行中,转盘快速滚动)ongoing_stop_scroll
(抽奖进行中,转盘停止滚动)ongoing_run_marquee
(抽奖进行中,跑马灯快速转动)stop
(抽奖结束,跑马灯结束转动)restart
(抽奖结束,重启正常滚动动画)
- 事件
- 转盘正常滚动
- 点击立即抽奖
- 动作
- 转盘正常滚动
- 转盘快速滚动
- 转盘停止滚动
- 跑马灯快速转动
- 跑马灯停止转动
- 变换
- 转盘由正常->快速滚动
- 转盘由快速->停止滚动
- 转盘停止滚动->跑马灯快速转动
- 跑马灯快速转动->跑马灯停止转动
- 跑马灯停止转动->转盘正常滚动
伪代码如下:
/**
* 抽奖组件
**/
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()
}
}
梳理完结构之后,发现状态之间切换清晰,每个函数,只需要处理当前状态的事务。状态之间也不会相互影响。