大家好,我是每天坚持一点点的铁蛋儿,一个爱分享前端的老body。这篇是分享手写状态机,大家务必点赞
、收藏
保存一下慢慢看,你们的关注
是我更新的动力。
相关学习资源
本系列有配套视频
,大家学习同时千万不要忘了三连
+ 关注
+ 分享
,有道是喝水不忘挖井人~
- HTTP基础原理:【HTTP基础原理视频】
- HTTP加密算法: 【HTTP加密算法视频】(视频更新中... 着急的小小伙伴先收藏哈)
- 大厂高频面试真题:【大厂面试高频面试解题视频】
- Vdom和diff算法:【轻松搞定vdom和diff视频】
正文
以拖拽为例,如图所示:
-
如上图中的转换结构需要四个参数:
- S (初始状态)
- A(触发行为)
- Fn(关联操作)
- S(结束状态)
-
state
enum States { Start, DragStart, Moving, Stoped, Selected } 复制代码
-
action触发行为
enum Actions { AUTO, EvtDragStart, EvtDrag, EvtDragEnd, } 复制代码
-
代码如下
// 状态操作函数 type fn= (...args: Array<any>) => void // 状态机 export default class StateMachine<S extends number, A extends number>{ // 初识状态 s: S // 转换结构 table: Map<S, Map<A, [fn, S]>> constructor(initState: S) { this.s = initState this.table = new Map() } // 状态转换函数 register(from: S,action: A, fn: fn,to: S) { if (!this.table.has(from)) { this.table.set(from, new Map()) } const getState = this.table.get(from)! getState.set(action, [fn, to]) } // dispatch 派发action 执行fn dispatch(action: A, ...data: Array<any>) { // 获取初始的table const initTable = this.table.get(this.s) if (!initTable) { return false } if (!initTable.has(action)) { return false } // 获取action对应fn和newState const [fn, newState] = initTable.get(action)! fn(...data) this.s = newState // 主要是给AUTO状态使用 所以while成自动状态 while (this.dispatch("<auto>" as A, ...data)); return true } } 复制代码
未完待续。。。。。。。
我是每天坚持进步一点点的铁蛋儿,如果你对技术有像一素的偏执,欢迎【小破站】前端铁蛋儿或者vx:15910703837一起学习一起进步。