状态模式

状态模式的关键是区分事物内部的状态，事物内部状态改变往往会带来事物的行为改变

初识状态模式

状态模式的关键是把事物的每种状态封装成单独的类，跟此种状态有关的行为都被封装在这个类的内部。

/* 电灯程序 */
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();
    }
};

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

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

以上程序会在状态多的时候会变得臃肿，破坏开放封闭原则（每增加一种状态，就要改变buttonWasPressed里的代码

/* 点灯程序2.0 */

//OfflightState
var OfflightState = function(light){
    this.light = light;
};

OfflightState.prototype.buttonWasPressed = function(){
    console.log('弱光');
    this.light.setState(this.light.weakLightState);     //切换状态到weakLightState
};

//weakLightState
var WeakLightState = function(light){
    this.light = light;
};

WeakLightState.prototype.buttonWasPressed = function(){
    console.log('强光');
    this.light.setState(this.light.strongLightState);
};

//strongLightState
var StrongLightState = function(light){
    this.light = light;
};

StrongLightState.prototype.buttonWasPressed = function(){
    console.log('关灯');
    this.light.setState(this.light.offLightState);
};


//light
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;

    button.innerHTML = '开关';
    this.button = document.body.appendChild(button);

    this.curState = this.offLightState; //设置当前状态
    this.button.onclick = function(){
        self.curState.buttonWasPressed();
    }
}

light.prototype.setState = function(newState){
    this.curState = newState;
}

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

状态模式的定义