Javascript设计模式理论与实战：状态模式

在软件开发中，很大部分时候就是操做数据，而不一样数据下展现的结果咱们将其抽象出来称为状态，咱们平时开发时本质上就是对应用程序的各类状态进行切换并做出相应处理。状态模式就是一种适合多种状态场景下的设计模式。使用状态模式能够可让代码更加清晰，提升应用程序的维护性和扩展性。

基础知识

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

状态模式的实现

基本示例

咱们简单地经过一个红绿灯的例子来讲明状态模式，红绿灯拥有一个状态：哪种颜色的灯亮了，每一种颜色的灯亮了以后又各自的动做，一共有红绿黄三种颜色的灯，也就是有三种状态。
首先，须要一个最基本的红绿灯对象，咱们定义以下：

1 var trafficLight = (function () {
2      var currentLight = null;
3      return {
4          change: function (light) {
5              currentLight = light;
6              currentLight.go();
7          }
8      }
9  })();

上面的代码中，trafficLight是一个红绿灯对象，它有一个局部变量currentLight表示当前亮灯的对象，同时返回一个方法，这个方法用来改变红绿灯的状态，并触发相应的处理程序。
接着咱们定义三种不一样颜色的灯，代码以下：

 1 function RedLight() { }
 2 RedLight.prototype.go = function () {
 3     console.log("this is red light");
 4 }
 5 function GreenLight() { }
 6 GreenLight.prototype.go = function () {
 7     console.log("this is green light");
 8 }
 9 function YellowLight() { }
10 YellowLight.prototype.go = function () {
11     console.log("this is yellow light");
12 }

这段代码分别定义了红绿黄三种颜色的灯对象，每个对象都包含一个go方法做为亮灯以后的处理程序。
接着，咱们在客户端进行切换不一样颜色的灯：

1 trafficLight.change(new RedLight());
2 trafficLight.change(new YellowLight());

经过传入灯对象到change方法中，从而改变红绿灯的状态，触发其相应的处理程序，这就是一个典型的状态模式的应用。

JS组件开发中的状态模式

状态模式在开发JS组件时很是有用，咱们平时开发组件时不少时候要切换组件的状态，每种状态有不一样的处理方式，这个时候就可使用状态模式进行开发
好比咱们要开发一个菜单组件，菜单拥有最基本的两种状态：显示和隐藏，相应的显示或隐藏可能会有各自的其余操做。使用状态模式的话，咱们首先定义一个环境类，在这里也就是菜单对象，简单地定义以下：

1 function Menu() { }
2 Menu.prototype.toggle = function (state) {
3     state();
4 }

这个菜单类有一个toggle方法用来切换状态，而后调用相应的处理方法。
接着咱们定义两种状态，定义以下：

1 var menuStates = {
2     "show": function () {
3         console.log("the menu is showing");
4     },
5     "hide": function () {
6         console.log("the menu is hiding");
7     }
8 };

在这里，经过一个对象menuStates来定义menu的状态，这里有两种状态show和hide，而后拥有相应的处理方法。在使用的时候经过下面的方法进行调用：

1 var menu = new Menu();
2 menu.toggle(menuStates.show);
3 menu.toggle(menuStates.hide);

这段代码实例化了一个Menu对象，而后分别切换了显示和隐藏两种状态，若是有第三种状态，咱们只须要menuStates添加相应的状态和处理程序便可。

总结

状态模式在开发Web组件时很是有用，能让咱们的代码结构更加清晰，可以很方便的增长组件的各类状态。使用状态模式的关键是要理清组件的各类状态，搞清楚组件的不一样状态和相应的处理函数，对组件后期的维护和扩展有极大的好处。

原文地址：http://luopq.com/2015/11/25/design-pattern-state/