今天完成的事情： 任务四的样式以及页面跳转之间的逻辑和数据的有限状态机分析

明天计划的事情： 将页面跳转和状态加入页面之中

遇到的问题：有限状态机FSM，是一个非常有用的模型，可以模拟世界上大部分事物。

简单说，它有三个特征：

　　* 状态总数（state）是有限的。

　　* 任一时刻，只处在一种状态之中。

　　* 某种条件下，会从一种状态转变（transition）到另一种状态。

它对JavaScript的意义在于，很多对象可以写成有限状态机。

举例来说，网页上有一个菜单元素。鼠标悬停的时候，菜单显示；鼠标移开的时候，菜单隐藏。如果使用有限状态机描述，就是这个菜单只有两种状态（显示和隐藏），鼠标会引发状态转变。

代码可以写成下面这样：

　　var menu = {

　　　　// 当前状态

　　　　currentState: 'hide',

　　　　// 绑定事件

　　　　initialize: function() {

　　　　　　var self = this;

　　　　　　self.on("hover", self.transition);

　　　　},

　　　　// 状态转换

　　　　transition: function(event){

　　　　　　switch(this.currentState) {

　　　　　　　　case "hide":

　　　　　　　　　　this.currentState = 'show';

　　　　　　　　　　doSomething();

　　　　　　　　　　break;

　　　　　　　　case "show":

　　　　　　　　　　this.currentState = 'hide';

　　　　　　　　　　doSomething();

　　　　　　　　　　break;

　　　　　　　　default:

　　　　　　　　　　console.log('Invalid State!');

　　　　　　　　　　break;

　　　　　　}

　　　　}

　　};

可以看到，有限状态机的写法，逻辑清晰，表达力强，有利于封装事件。一个对象的状态越多、发生的事件越多，就越适合采用有限状态机的写法。

另外，JavaScript语言是一种异步操作特别多的语言，常用的解决方法是指定回调函数，但这样会造成代码结构混乱、难以测试和除错等问题。有限状态机提供了更好的办法：把异步操作与对象的状态改变挂钩，当异步操作结束的时候，发生相应的状态改变，由此再触发其他操作。这要比回调函数、事件监听、发布/订阅等解决方案，在逻辑上更合理，更易于降低代码的复杂度。

收获：有限状态机这个模型对于数据在有限的状态中的调用和转换感觉是非常棒的，看了北京师兄讲的视频后很有收获，只是还没想好该如何插入JS中以及如何在两个页面之间使用。