状态机——之前我们称之为“有限状态机”（Finite State Machines，FSM）使用状态机可以轻松地管理很多控制器，根据需要显示和隐藏视图。那么，到底什么是状态机？本质上讲状态机由两部分组成：状态和转换器。它只有一个活动状态，但也包含很多非活动状态（passive state）。当活动状态之间相互切换时就会调用状态转换器。状态机如何工作呢？考虑这样一个场景，应用中存在一些视图，它们的显示是相互独立的，比如一个视图用来显示联系人，另一个视图用来编辑联系人。这两个视图一定是互斥的关系，其中一个显示时另一个一定是隐藏的。这个场景就非常适合引入状态机，因为它能确保每个时刻只有一种视图是激活的。的确，如果我们想添加一些新视图，比如一个承载设置操作的视图，用状态机来处理这种场景绰绰有余。我们来对实际的例子做进一步修改，来看一看实现一个状态机的思路是怎样的。这个例子非常简单，没有实现多个转换器类型，但足以满足我们的需要。首先，我们使用jQuery 的事件API 创建一个Events 对象，给它添加绑定和触发状态机的
事件的能力：

var Events = {
     bind: function(){
if ( !this.o ) this.o = $({});
this.o.bind.apply(this.o, arguments);
     },
     trigger: function(){
if ( !this.o ) this.o = $({});
this.o.trigger.apply(this.o, arguments);
     }
};

这里的Events 对象本质上是扩展了jQuery 现有的DOM 外部事件的支持，这样我们就可以将它应用到我们的库中。现在我们来创建StateMachine 类，它包含一个主要的函数add() ：

var StateMachine = function(){};
StateMachine.fn = StateMachine.prototype;

// 添加事件绑定或触发行为
  $.extend(StateMachine.fn, Events);
   StateMachine.fn.add = function(controller){
 this.bind("change", function(e, current){ //this指向StateMachine的实例，给其绑定change事件
        if (controller == current)
        controller.activate();
         else
         controller.deactivate();
   });
  controller.active = $.proxy(function(){   //这个controller.active为传进来的参数中的active对象，触发提供了设置。例如con1中的active对象 绑定到了sateMachine的原型上，实例化即被触发。
        this.trigger("change", controller);
   }, this);
 };

这个状态机的add() 函数将传入的控制器添加至状态列表，并创建一个active() 函数。当调用active() 的时候，控制器的状态就转换为激活状态。对于激活状态的控制器，状态机将基于它调用activate()，对于其他的控制器，状态机则会调用deactivate()。这里给出两个例子，通过例子可以看出这两类控制器是如何工作的，我们首先将控制器添加至状态机中，然后激活其中一个控制器：

var con1 = {
     activate: function(){ /* ... */ },
     deactivate: function(){ /* ... */ }
};
var con2 = {
     activate: function(){ /* ... */ },
     deactivate: function(){ /* ... */ }
};
// 创建一个新的状态机，并添加状态
var sm = new StateMachine;
sm.add(con1);
sm.add(con2);
// 激活第1 个状态
con1.active();

状态机的add() 函数给change 事件创建了一个回调，根据需要调用activate() 或deactivate() 函数。尽管状态机给我们提供了active() 函数，我们同样可以通过手动触发change 事件来改变状态：

sm.trigger("change", con2);

在控制器activate() 函数的内部，我们可以创建并显示它的视图，添加并显示元素。与此类似，在deactivate() 函数内部我们则将元素销毁来隐藏视图。可以通过CSS 的类来隐藏和显示视图，这种方法非常不错，即给元素添加名为.active 的类来显示视图，将它移除就可以隐藏视图：

var con1 = {
activate: function(){
     $("#con1").addClass("active");
},
deactivate: function(){
    $("#con1").removeClass("active");
   }
};
var con2 = {
activate: function(){
    $("#con2").addClass("active");
},
 deactivate: function(){
      $("#con2").removeClass("active");
    }
};
然后在样式表中保证视图包含.active 类，否则不包含.active 类：
```javascript
#con1, #con2 { display: none; }
#con1.active, #con2.active { display: block; }

完整代码

   var Events = {
      bind: function(){
        if ( !this.o ) this.o = $({});
        this.o.bind.apply(this.o, arguments);
      },
     
      trigger: function(){
        if ( !this.o ) this.o = $({});
        this.o.trigger.apply(this.o, arguments);
      }
    };
   
    var StateMachine = function(){};
    StateMachine.fn  = StateMachine.prototype;
    $.extend(StateMachine.fn, Events);
  
    StateMachine.fn.add = function(controller){
      this.bind("change", function(e, current){
        if (controller == current)
          controller.activate();
        else
          controller.deactivate();
      });
     
      controller.active = $.proxy(function(){
        this.trigger("change", controller);
      }, this);
    };
   
    var con1 = {
      activate: function(){
        console.log("controller 1 activated");
      },
      deactivate: function(){
        console.log("controller 1 deactivated");
      }
    };
   
    var con2 = {
      activate: function(){
        console.log("controller 2 activated");
      },
      deactivate: function(){
        console.log("controller 2 deactivated");
      }
    };
   
    var sm = new StateMachine;
    sm.add(con1);
    sm.add(con2);    
    con1.active();