大家好,我是IT修真院深圳分院第九期的学员徐炜,一枚正直纯洁善良的前端程序员。今天给大家带来的是CONSOLE的用法,以及DEBUG技巧。
一.背景介绍
有限状态机,(英语:Finite-state machine, FSM),又称有限状态自动机,简称状态机, 是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。有限状态机(Finite-state machine)是一个非常有用的模型,可以模拟世界上大部分事物。它 是一个数学模型。是一个抽象机器,在任何时候都可以处于有限数量的状态之一。 响应某些外部输入, FSM可以从一个状态转换到另一个状态; 从一种状态到另一种状态的变化称为过渡。 状态机的行为可以在现代社会中的许多设备中观察到, 这些设备根据它们呈现的事件序列执行预定的一系列行为。 例如自动售货机,当存放适当的硬币组合时分配产品,当车辆等待时改变顺序的交通灯等。
二.知识剖析
1、有限状态机一般都有以下特点:
(1)可以用状态来描述事物,并且任一时刻,事物总是处于一种状态;
(2)事物拥有的状态总数是有限的;
(3)通过触发事物的某些行为,可以导致事物从一种状态过渡到另一种状态;
(4)事物状态变化是有规则的,A状态可以变换到B,B可以变换到C,A却不一定能变换到C;
(5)同一种行为,可以将事物从多种状态变成同种状态,但是不能从同种状态变成多种状态。
2、initial选项用来表示fsm对象的初始状态,events选项用来描述fsm对象所有状态的变化规则,每一种变化规则对应一种行为。 create方法为实例的每一种行为都添加了一个方法,调用这个方法就相当于触发对象的某种行为,当对象行为发生时, 对象的状态就可以发生变化。如以上例子创建的实例将拥有如下行为方法:
(1)fsm.warn() : 调用该方法,实例状态将从'green'变为'yellow';
(2)fsm.stop() : 调用该方法,实例状态将从'yellow'变为'red';
(3)fsm.ready() : 调用该方法,实例状态将从'red'变为'yellow';
(4)fsm.go() : 调用该方法,实例状态将从'yellow'变为'green';
这些方法是StateMachine根据create时配置的events规则自动创建的,方法名跟events规则里面的name属性对应, events规则里面有几个不重复的name,就会添加几个行为方法,来判断和控制实例的状态和行为:
(1)fsm.current - 返回实例当前的状态;
(2)fsm.is(state) - 如果传入的state是实例当前状态就返回true;
(3)fsm.can(eventName) - 如果传入的eventName在实例当前状态能够被触发就返回true;
(4)fsm.cannot(eventName) - 如果传入的eventName在实例当前状态不能被触发就返回true;
(5)fsm.transitions() - 以数组的形式返回实例当前状态下能够被触发的行为列表;
假定warn事件使得状态从green变为yellow,上面四类回调函数的发生顺序为:
onBeforeWarn → onLeaveGreen → onEnterYellow → onAfterWarn。
三.常见问题
有限状态机有哪些应用场景?
四.解决方案
有限状态机满足3点即可用:
(1)所需状态确定;
(2)有事件触发转变状态;
(3)总状态有限且转变有规律。
页面可用有限状态机的元素较多且有规律时可用:例如:交通信号灯,还有任务中杀人游戏的玩家死活状态、白天黑夜状态等。
五.编码实战
实战演示demo,详见视频。
六.扩展思考
有限状态机有哪些优点?
有限状态机的写法,逻辑清晰,表达力强,有利于封装事件。一个对象的状态越多、发生的事件越多,就越适合采用有限状态机的写法。
七.参考文献
参考二:JavaScript与有限状态机(阮一峰) 试试用有限状态机的思路来定义javascript组件
八.更多讨论
问题一:同步调用、回调和异步调用有什么区别?
异步调用是一种类似消息或者事件的机制,不过它的调用方向刚好相反,接口的服务在收到被调用的信息或事件时,会主动调用(调用方)的接口。
问题二:有限状态机通常在什么地方被用到?
问题三:有限状态机有哪些优点?
感谢田迪生师兄,此教程是在他们之前技术分享的基础上完善而成。
今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~