JavaScript設計模式_13_狀態模式

標籤：ini   color   etc   body   lock   click   sse   event   super   

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

/** * 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();

『Stinchan』出處：http://www.cnblogs.com/stinchan/p/7065432.html本文著作權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連結，否則保留追究法律責任的權利。

JavaScript設計模式_13_狀態模式