學(xué)習(xí)JavaScript設(shè)計(jì)模式之狀態(tài)模式
狀態(tài)模式的關(guān)鍵是區(qū)分事物內(nèi)部的狀態(tài),事物內(nèi)部狀態(tài)的改變往往會帶來事物的行為改變。
當(dāng)電燈開著,此時按下開關(guān),電燈會切換到關(guān)閉狀態(tài);再按一次開關(guān),電燈又將被打開。同一個開關(guān)在不同的狀態(tài)下,表現(xiàn)出來的行為是不一樣的。
一、有限狀態(tài)機(jī)
- 狀態(tài)總數(shù)(state)是有限的。
- 任一時刻,只處在一種狀態(tài)之中。
- 某種條件下,會從一種狀態(tài)轉(zhuǎn)變(transition)到另一種狀態(tài)。
允許一個對象在其內(nèi)部狀態(tài)改變時改變它的行為,對象看起來似乎修改了它的類。
解釋:
(1)將狀態(tài)封裝成獨(dú)立的類,并將請求委托給當(dāng)前的狀態(tài)對象,當(dāng)對象的內(nèi)部狀態(tài)發(fā)生改變時,會帶來不同的行為變化。
(2)使用的對象,在不同的狀態(tài)下具有截然不同的行為(委托效果)
談到封裝,一般優(yōu)先考慮封裝對象的行為,而不是對象的狀態(tài)。
但在狀態(tài)模式中剛好相反,狀態(tài)模式的關(guān)鍵是把事物的每種狀態(tài)都封裝成單獨(dú)的類。
二、示例
點(diǎn)燈程序 (弱光 –> 強(qiáng)光 –> 關(guān)燈)循環(huán)
// 關(guān)燈 var OffLightState = function(light) { this.light = light; }; // 弱光 var OffLightState = function(light) { this.light = light; }; // 強(qiáng)光 var StrongLightState = function(light) { this.light = light; }; var Light = function(){ /* 開關(guān)狀態(tài) */ this.offLight = new OffLightState(this); this.weakLight = new WeakLightState(this); this.strongLight = new StrongLightState(this); /* 快關(guān)按鈕 */ this.button = null; }; Light.prototype.init = function() { var button = document.createElement("button"), self = this; this.button = document.body.appendChild(button); this.button.innerHTML = '開關(guān)'; this.currentState = this.offLight; this.button.click = function() { self.currentState.buttonWasPressed(); } }; // 讓抽象父類的抽象方法直接拋出一個異常(避免狀態(tài)子類未實(shí)現(xiàn)buttonWasPressed方法) Light.prototype.buttonWasPressed = function() { throw new Error("父類的buttonWasPressed方法必須被重寫"); }; Light.prototype.setState = function(newState) { this.currentState = newState; }; /* 關(guān)燈 */ OffLightState.prototype = new Light(); // 繼承抽象類 OffLightState.prototype.buttonWasPressed = function() { console.log("關(guān)燈!"); this.light.setState(this.light.weakLight); } /* 弱光 */ WeakLightState.prototype = new Light(); WeakLightState.prototype.buttonWasPressed = function() { console.log("弱光!"); this.light.setState(this.light.strongLight); }; /* 強(qiáng)光 */ StrongLightState.prototype = new Light(); StrongLightState.prototype.buttonWasPressed = function() { console.log("強(qiáng)光!"); this.light.setState(this.light.offLight); };
PS:說明補(bǔ)充
必須把OffLightState、WeakLightState、StrongLightState構(gòu)造函數(shù)提前。
new A("a"); var A = function(a) { console.log(a) } new B("b"); function B(b) { console.log(b); }
函數(shù)聲明會被提升到普通變量之前。
三、性能優(yōu)化點(diǎn)
(1)如何管理狀態(tài)對象的創(chuàng)建和銷毀?
第一種僅當(dāng)state對象被需要時才創(chuàng)建并隨后銷毀(state對象比較龐大,優(yōu)先選擇),
另一種是一開始就創(chuàng)建好所有的狀態(tài)對象,并且始終不銷毀它們(狀態(tài)改變頻繁)。
(2)利用享元模式共享一個state對象。
四、JavaScript版本的狀態(tài)機(jī)
(1)通過Function.prototype.call方法直接把請求委托給某個字面量對象來執(zhí)行
// 狀態(tài)機(jī) var FSM = { off: { buttonWasPressed: function() { console.log("關(guān)燈"); this.button.innerHTML = "下一次按我是開燈"; // 這是Light上的屬性?。?! this.currState = FSM.on; // 這是Light上的屬性?。?! } }, on: { buttonWasPressed: function() { console.log("開燈"); this.button.innerHTML = "下一次按我是關(guān)燈"; this.currState = FSM.off; } }, }; var Light = function() { this.currState = FSM.off; // 設(shè)置當(dāng)前狀態(tài) this.button = null; }; Light.prototype.init = function() { var button = document.createElement("button"); self = this; button.innerHTML = "已關(guān)燈"; this.button = document.body.appendChild(button); this.button.onclick = function() { // 請求委托給FSM狀態(tài)機(jī) self.currState.buttonWasPressed.call(self); } } var light = new Light(); light.init();
(2)利用delegate函數(shù)
var delegate = function(client, delegation) { return { buttonWasPressed: function() { return delegation.buttonWasPressed.apply(client, arguments); } }; }; // 狀態(tài)機(jī) var FSM = { off: { buttonWasPressed: function() { console.log("關(guān)燈"); this.button.innerHTML = "下一次按我是開燈"; this.currState = this.onState; } }, on: { buttonWasPressed: function() { console.log("開燈"); this.button.innerHTML = "下一次按我是關(guān)燈"; this.currState = this.offState; } }, }; var Light = function() { this.offState = delegate(this, FSM.off); this.onState = delegate(this, FSM.on); this.currState = this.offState; // 設(shè)置當(dāng)前狀態(tài) this.button = null; }; Light.prototype.init = function() { var button = document.createElement("button"); self = this; button.innerHTML = "已關(guān)燈"; this.button = document.body.appendChild(button); this.button.onclick = function() { // 請求委托給FSM狀態(tài)機(jī) self.currState.buttonWasPressed(); } } var light = new Light(); light.init();
希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
- JS設(shè)計(jì)模式之狀態(tài)模式概念與用法分析
- 深入理解JavaScript系列(43):設(shè)計(jì)模式之狀態(tài)模式詳解
- javascript設(shè)計(jì)模式 – 策略模式原理與用法實(shí)例分析
- javascript設(shè)計(jì)模式 – 備忘錄模式原理與用法實(shí)例分析
- javascript設(shè)計(jì)模式 – 中介者模式原理與用法實(shí)例分析
- javascript設(shè)計(jì)模式 – 命令模式原理與用法實(shí)例分析
- javascript設(shè)計(jì)模式 – 解釋器模式原理與用法實(shí)例分析
- javascript設(shè)計(jì)模式 – 職責(zé)鏈模式原理與用法實(shí)例分析
- javascript設(shè)計(jì)模式 – 享元模式原理與用法實(shí)例分析
- javascript設(shè)計(jì)模式 – 組合模式原理與應(yīng)用實(shí)例分析
- JS中間件設(shè)計(jì)模式的深入探討與實(shí)例分析
- javascript設(shè)計(jì)模式 – 狀態(tài)模式原理與用法實(shí)例分析
相關(guān)文章
webpack是如何實(shí)現(xiàn)模塊化加載的方法
這篇文章主要介紹了webpack是如何實(shí)現(xiàn)模塊化加載的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11利用js實(shí)現(xiàn)遮罩以及彈出可移動登錄窗口
本篇文章是對使用js實(shí)現(xiàn)遮罩以及彈出可移動登錄窗口的實(shí)現(xiàn)方法進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-07-07用Javascript輕松制作一套簡單的抽獎系統(tǒng)
用Javascript輕松制作一套簡單的抽獎系統(tǒng)...2006-12-12微信小程序?qū)崿F(xiàn)的3d輪播圖效果示例【基于swiper組件】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的3d輪播圖效果,結(jié)合實(shí)例形式分析了微信小程序基于swiper組件相關(guān)屬性設(shè)置、事件響應(yīng)操作技巧,需要的朋友可以參考下2018-12-12關(guān)閉瀏覽器輸入框自動補(bǔ)齊 兼容IE,FF,Chrome等主流瀏覽器
這篇文章主要介紹了關(guān)閉瀏覽器輸入框自動補(bǔ)齊 兼容IE,FF,Chrome等主流瀏覽器,需要的朋友可以參考下。希望對大家有所幫助2014-02-02js與jquery分別實(shí)現(xiàn)tab標(biāo)簽頁功能的方法
這篇文章主要介紹了js與jquery分別實(shí)現(xiàn)tab標(biāo)簽頁功能的方法,結(jié)合實(shí)例形式對比分析了javascript與jQuery分別實(shí)現(xiàn)tab標(biāo)簽功能的操作技巧,需要的朋友可以參考下2016-11-11