js状态模式

介绍

状态模式定义一个对象，这个对象可以通过管理其状态从而使得应用程序作出相应的变化。状态模式是一个非常常用的设计模式，它主要有两个角色组成：
（1）环境类：拥有一个状态成员，可以修改其状态并作出相应反应。
（2）状态类：表示一种状态，包含其相应的处理方法

1.控制红绿灯状态案例

//我们首先定义一个环境类，在这里也就是菜单对象，拥有一个状态成员，可以修改其状态并作出相应反应
var trafficLight = (function () {
      var currentLight = null;
      return {
       change: function (light) {
           currentLight = light;
           console.log(currentLight)    ---对应各自的实例对象
           currentLight.go();   ---实例对象的方法           
       }
   }
})();

//我们首先定义状态类,表示一种状态，包含其相应的处理方法
function RedLight() { }
RedLight.prototype.go = function () {
  console.log("this is red light");
}
function GreenLight() { }
GreenLight.prototype.go = function () {
  console.log("this is green light");
}
function YellowLight() { }
YellowLight.prototype.go = function () {
  console.log("this is yellow light");
}

trafficLight.change(new RedLight());      ----this is red light
trafficLight.change(new YellowLight());   ----this is yellow light

2.控制菜单键的显示和隐藏状态案例

//我们首先定义一个环境类，在这里也就是菜单对象，拥有一个状态成员，可以修改其状态并作出相应反应
function Menu() { }
Menu.prototype.toggle = function (state) {
  state();
}

//我们首先定义状态类,表示一种状态，包含其相应的处理方法
var menuStates = {
  "show": function () {
      console.log("the menu is showing");
  },
  "hide": function () {
      console.log("the menu is hiding");
  }
};

//这段代码实例化了一个Menu对象，然后分别切换了显示和隐藏两种状态，如果有第三种状态，我们只需要
//menuStates添加相应的状态和处理程序即可
var menu = new Menu();
menu.toggle(menuStates.show);
menu.toggle(menuStates.hide);