ch04/state_machine.html

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <script src="../lib/jquery.js" type="text/javascript" charset="utf-8"></script>
  
  <script type="text/javascript" charset="utf-8">
    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();
  </script>
</head>
<body>
  
</body>
</html>