今天完成的事：

任务四中涉及到了有限状态机的使用，可是对于状态机是个什么鬼东西都不太明白，查阅了一番资料。

1.什么是有限状态机：

有限状态机，（英语：Finite-state machine, FSM），又称有限状态自动机，简称状态机，是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。有限状态机是一个非常有用的模型，可以模拟世界上大部分事物。它 是一个数学模型。是一个抽象机器，在任何时候都可以处于有限数量的状态之一。 响应某些外部输入， FSM可以从一个状态转换到另一个状态; 从一种状态到另一种状态的变化称为过渡。

使用状态机，能让你的代码变得更直观、更整洁，，逻辑清晰，表达力强，有利于封装事件。一个对象的状态越多、发生的事件越多，就越适合采用有限状态机的写法。

 1、有限状态机一般都有以下特点：

 （1）可以用状态来描述事物，并且任一时刻，事物总是处于一种状态；

 （2）事物拥有的状态总数是有限的；

 （3）通过触发事物的某些行为，可以导致事物从一种状态过渡到另一种状态；

 （4）事物状态变化是有规则的，A状态可以变换到B，B可以变换到C，A却不一定能变换到C；

 （5）同一种行为，可以将事物从多种状态变成同种状态，但是不能从同种状态变成多种状态。

使用有限状态机必须引入js脚本

<script src="state-machine.js"></script>

然后在html文档中插入有限状态机:

var fsm = StateMachine.create({

    initial: 'green',

    events: [
       { name: 'warn',  from: 'green',  to: 'yellow' },
        { name: 'stop', from: 'yellow', to: 'red' },
        { name: 'ready',  from: 'red',    to: 'yellow' },
        { name: 'go', from: 'yellow', to: 'green' }
    ]

});

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。

4.使用ES 6字符串拼接方法达到html页面渲染的效果。

for (var i = 0; i < result.length; i++) {
    // 声明一个mod变量，渲染result数组内的玩家
    var mod = `<div class="main" >
        <div class="box1">${result[i].identity}</div>
        <div class="box2">${i + 1}号</div>
        <div class="photo">
            <img src="../img/task-7/task-2-4.png" alt="">
            <img src="../img/task-7/task-2-5.png" alt="">
            <img src="../img/task-7/task-2-6.png" alt="">
            <img src="../img/task-7/task-2-7.png" alt="">
        </div>
    </div>`;
    // 在html的<main ></main>中插入mod
    $("main").append(mod)

明天计划的事：继续任务四

遇到的问题：任务逻辑屡不太清楚，不太明白有限状态机在任务中应该运用.

收获：使用ES 6字符串拼接方法达到html页面渲染的效果。