狀態模式是一種根據事物內部狀態的改變，從而改變事物行為的一種模式。

/**
 * pre:狀態模式
 */
//---------- 示例1 ----------------
/**
 * 模擬電燈開關
 */
var Light = function() {
    this.state = "off";
    this.button = null;
};
Light.prototype.init = function() {
    var button = document.createElement("button");
    var _self = this;
    button.innerHTML 
 
= "開關";
    this.button = document.body.appendChild(button);
    this.button.onclick = function() {
        _self.buttonWasPressed();
    };
};
Light.prototype.buttonWasPressed = function() {
    var _self = this;
    var onEvent = function() {
        _self.state = "on";
        console.log("開燈");
    };
    
 
var offEvent = function() {
        _self.state = "off";
        console.log("關燈");
    };
    var operations = {
        "off": onEvent,
        "on": offEvent
    }
    return operations[_self.state]();
};
var light = new Light();
light.init();
//----------- 示例2 --------
/**
 * [分析]：有另外一種電燈，按一次打開弱光，按兩次打開強光，按三次關閉電燈。
 * 實現這一功能，我們需要對buttonWasPressed方法內部進行改造，增加另外一種狀態事件。
 * 試想，如果在程序中，有N多種狀態的切換，我們是不是要定義N多種狀態，以及每種狀態切換所發生的事件。
 * 若其中一個狀態發生改變，還得去修改buttonWasPressed方法，使得復用性和可維護性大大降低。
 * 使用狀態模式改寫代碼：
 
 
*/
var offLightState = function(light) {
    this.light = light;
};
offLightState.prototype.buttonWasPressed = function() {
    console.log("弱光");
    this.light.setCurrentState(this.light.weakLightState);
};
var weakLightState = function(light) {
    this.light = light;
};
weakLightState.prototype.buttonWasPressed = function() {
    console.log("強光");
    this.light.setCurrentState(this.light.strongLightState);
};
var strongLightState = function(light) {
    this.light = light;
};
strongLightState.prototype.buttonWasPressed = function() {
    console.log("超級強光");
    this.light.setCurrentState(this.light.superStrongLightState);
};
var superStrongLightState = function(light) {
    this.light = light;
};
superStrongLightState.prototype.buttonWasPressed = function() {
    console.log("關燈");
    this.light.setCurrentState(this.light.offLightState);
};
var Light = function() {
    this.offLightState = new offLightState(this);
    this.weakLightState = new weakLightState(this);
    this.strongLightState = new strongLightState(this);
    this.superStrongLightState = new superStrongLightState(this);
    this.currentState = null; // 當前狀態
    this.button = null; // 開關
};
Light.prototype.setCurrentState = function(state) {
    this.currentState = state;
};
Light.prototype.init = function() {
    var _self = this;
    var button = document.createElement("button");
    button.innerHTML = "開關";
    this.button = document.body.appendChild(button);
    this.currentState = this.offLightState;
    this.button.onclick = function() {
        _self.currentState.buttonWasPressed();
    };
};
var light = new Light();
light.init();
//---------------- 示例3 ----------------
/**
 * 使用對象字面量重寫
 */
var Light = function() {
    this.currentState = FSM.off;
    this.button = null;
};
var FSM = {
    "off": {
        buttonWasPressed: function() {
            console.log("弱光");
            this.currentState = FSM.weak;
        }
    },
    "weak": {
        buttonWasPressed: function() {
            console.log("強光");
            this.currentState = FSM.strong;
        }
    },
    "strong": {
        buttonWasPressed: function() {
            console.log("關燈");
            this.currentState = FSM.off;
        }
    }
};
Light.prototype.init = function() {
    var _self = this;
    var button = document.createElement("button");
    button.innerHTML = "開關";
    this.button = document.body.appendChild(button);
    this.button.onclick = function() {
        _self.currentState.buttonWasPressed.call(_self);
    };
};
var light = new Light();
light.init();
//------------- 示例4 --------------
/**
 * 使用委托進行重寫
 */
var delegate = function(client, delegation) {
    return {
        "buttonWasPressed": function() {
            delegation.buttonWasPressed.apply(client, arguments);
        }
    };
};
var Light = function() {
    this.button = null;
    this.offLightState = delegate(this, FSM.off);
    this.weakLightState = delegate(this, FSM.weak);
    this.strongLightState = delegate(this, FSM.strong);
    this.currentState = this.offLightState;
};
var FSM = {
    "off": {
        "buttonWasPressed": function() {
            console.log("弱光");
            this.currentState = this.weakLightState;
        }
    },
    "weak": {
        "buttonWasPressed": function() {
            console.log("強光");
            this.currentState = this.strongLightState;
        }
    },
    "strong": {
        "buttonWasPressed": function() {
            console.log("關燈");
            this.currentState = this.offLightState;
        }
    }
};
Light.prototype.init = function() {
    var _self = this;
    var button = document.createElement("button");
    button.innerHTML = "開關";
    this.button = document.body.appendChild(button);
    this.button.onclick = function() {
        _self.currentState.buttonWasPressed.call(_self);
    };
}
var light = new Light();
light.init();

JavaScript設計模式_13_狀態模式