设计模式之状态模式

什么是状态模式

允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。

简单的解释一下：

第一部分的意思是将状态封装成独立的类，并将请求委托给当前的状态对象，当对象的内部状态改变时，会带来不同的行为变化。
第二部分是从客户的角度来看，我们使用的对象，在不同的状态下具有截然不同的行为，这个对象看起来是从不同的类中实例化而来的，实际上这是使用了委托的效果。

初识状态模式

我们来想象这样一个场景：有一个电灯，电灯上面只有一个开关。当电灯开着的时候，此时按下开关，电灯会切换到关闭状态；再按一次开关，电灯又将被打开。同一个开关按钮，在不同的状态下，表现出来的行为是不一样的。

现在用代码来描述这个场景，首先定义一个 Light 类，可以预见，电灯对象 light 将从 Light类创建而出， light 对象将拥有两个属性，我们用 state 来记录电灯当前的状态，用 button 表示具体的开关按钮。下面来编写这个电灯程序的例子。

        var Light = function(){
		this.state = 'off'; // 给电灯设置初始状态off
		this.button = null; // 电灯开关按钮
	};

	Light.prototype.init = function(){
		var button = document.createElement( 'button' ),
		self = this;
		button.innerHTML = '开关';
		this.button = document.body.appendChild( button );
		this.button.onclick = function(){
			self.buttonWasPressed(); // 当 button 的 onclick 事件被触发时,根据不同的状态执行不同的操作
		}
	};

	Light.prototype.buttonWasPressed = function(){
		if ( this.state === 'off' ){
			console.log( '开灯' );
			this.state = 'on';
		}else if ( this.state === 'on' ){
			console.log( '关灯' );
			this.state = 'off';
		}
	};

	var light = new Light();
	light.init();
      // 现在出了新的电灯 第一次按下打开弱光，第二次按下打开强光，第三次才是关闭电灯。现在必须改造上面的代码来完成这种新型电灯的制造
      Light.prototype.buttonWasPressed = function(){
      	if ( this.state === 'off' ){
      		console.log( '弱光' );
      		this.state = 'weakLight';
      	}else if ( this.state === 'weakLight' ){
      		console.log( '强光' );
      		this.state = 'strongLight';
      	}else if ( this.state === 'strongLight' ){
      		console.log( '关灯' );
      		this.state = 'off';
      	}
      };

好像上面的代码没什么问题，但是随着灯的状态的不断增加，比如强强光，闪烁光，然后切换灯的时候，我们还要额外做其他的事，比如弱光的时候顺便把空调打开，放个轻音乐啥的，这就让我们的buttonWasPressed 函数很臃肿，而且每次修改这个函数之前你得把这个函数逻辑捋一遍，改一个bug真的是颤颤惊惊，如履薄冰。

状态模式改进电灯程序

状态模式的关键是把事物的每种状态都封装成单独的类，跟此种状态有关的行为都被封装在这个类的内部，所以 button 被按下的的时候，只需要在上下文中，把这个请求委托给当前的状态对象即可，该状态对象会负责渲染它自身的行为

同时我们还可以把状态的切换规则事先分布在状态类中， 这样就有效地消除了原本存在的大量条件分支语句

    var OffLightState = function( light ){
	this.light = light;
	};

	OffLightState.prototype.buttonWasPressed = function(){
		console.log( '弱光' ); // offLightState 对应的行为
		this.light.setState( this.light.weakLightState ); // 切换状态到weakLightState
	};
       // WeakLightState：
        var WeakLightState = function( light ){
	  this.light = light;
        };

        WeakLightState.prototype.buttonWasPressed = function(){
		console.log( '强光' ); // weakLightState 对应的行为
		this.light.setState( this.light.strongLightState ); // 切换状态到strongLightState
	};
	// StrongLightState：
	var StrongLightState = function( light ){
		this.light = light;
	};

	StrongLightState.prototype.buttonWasPressed = function(){
		console.log( '关灯' ); // strongLightState 对应的行为
		this.light.setState( this.light.offLightState ); // 切换状态到offLightState
	};

	var Light = function(){
		this.offLightState = new OffLightState( this );
		this.weakLightState = new WeakLightState( this );
		this.strongLightState = new StrongLightState( this );
		this.button = null;
	};


	Light.prototype.init = function(){
		var button = document.createElement( 'button' ),
		self = this;
		this.button = document.body.appendChild( button );
		this.button.innerHTML = '开关';
		this.currState = this.offLightState; // 设置当前状态
		this.button.onclick = function(){
			self.currState.buttonWasPressed();
		}	
	};

	Light.prototype.setState = function( newState ){
		this.currState = newState;
	};

	var light = new Light();
	light.init();