今天完成的事情：任务四总算完成，代码已修改。已提交
明天计划的事情：任务五与后端交互，学习进行，
收获：深度思考：
有限状态机：
有限状态机（）是一种非常有用的模型，可以模拟出世界上大部分事物，它是一个数学模型；事件或元素状态在任何时候，都处在有限数量的状态中的其中一种。
有限状态机的三个特征：
状态（state）数量是有限的；
在任意时刻，只会处于一种状态；
在某条件下，状态，会从一种状态转变（transition）成另一种状态。
使用：在JS脚本中，新建一个对象，用这个对象的属性来模拟元素的状态，用这个对象的方法模拟元素在不同状态间的转变，那么这个对象就是一个有限状态机。有限状态机的描述，决于当前状态是确定的，拥有有限个状态，响应事件，不同状态间的转变是有规律的。用有限状态机的第一步是要引入有限状态机的js库，不然是无法使用的。
优点：有限状态机的写法，逻辑清晰，表达力强，有利于封装事件。一个对象的状态越多、发生的事件越多，就越适合采用有限状态机的写法。
实例：
//通过有限状态机实现两个效果 1.点击顺序从上到下 2.处于某个状态时，点击其他按钮会报错
var fsm = new StateMachine({ //创建有限状态机
init: '1', //定义初始状态为 1
transitions: [ //通过对象描述状态总和
{ name: 'aa', from: '1', to: '2' }, //状态机通过 name转换
{ name: 'bb', from: '2', to: '3' }, //from 表示当前行为从哪个状态来的
{ name: 'cc', from: '3', to: '4' }, // to 表示过度到这个状态
{ name: 'dd', from: '4', to: '1' },
],
//实现第一个效果。 不按顺序点击时，会报错提示
methods: {
//报错提示
onInvalidTransition: function (transition, from, to) {
switch (from) {
case '1':
alert('请按顺序点击，目前是状态1');
break;
case '2':
alert('请按顺序点击，目前是状态2');
break;
case '3':
alert('请按顺序点击，目前是状态3');
break;
case '4':
alert('请按顺序点击，目前是状态4');
break;
}
}
}
})
//添加点击事件
//杀人点击按钮
$(".process-box").eq(0).on("click", function () {
//通过 if 事件判断是否可以点击
if (fsm.state === '1') {
alert('天黑了，杀手开始杀人');
}
//实现第二个效果，点击顺序从上往下
fsm.aa() //点击执行弹窗后实现状态转换
});
//亡灵发言点击按钮
$(".process-box").eq(1).on("click", function () {
if (fsm.state === '2') {
alert('亡者请发言');
}
fsm.bb()
});
//全体发言按钮
$(".process-box").eq(2).on("click", function () {
if (fsm.state === '3') {
alert('玩家依次发言');
}
fsm.cc()
});
//投票按钮
$(".process-box").eq(3).on("click", function () {
if (fsm.state === '4') {
alert('发言结束，请投票');
}
fsm.dd()
});
返回列表
评论