輕松掌握J(rèn)avaScript狀態(tài)模式
狀態(tài)模式
狀態(tài)模式(State)允許一個(gè)對(duì)象在其內(nèi)部狀態(tài)改變的時(shí)候改變它的行為,對(duì)象看起來(lái)似乎修改了它的類。
狀態(tài)模式的使用場(chǎng)景也特別明確,有如下兩點(diǎn):
1.一個(gè)對(duì)象的行為取決于它的狀態(tài),并且它必須在運(yùn)行時(shí)刻根據(jù)狀態(tài)改變它的行為。(有些對(duì)象通常會(huì)有好幾個(gè)狀態(tài),在每個(gè)狀態(tài)都只可以做當(dāng)前狀態(tài)才可以做的事情,而不能做其它狀態(tài)能做的事兒)
2.一個(gè)操作中含有大量的分支語(yǔ)句,而且這些分支語(yǔ)句依賴于該對(duì)象的狀態(tài)。狀態(tài)通常為一個(gè)或多個(gè)枚舉常量的表示。
一、有限狀態(tài)機(jī)
1.狀態(tài)總數(shù)(state)是有限的。
2.任一時(shí)刻,只處在一種狀態(tài)之中。
3.某種條件下,會(huì)從一種狀態(tài)轉(zhuǎn)變(transition)到另一種狀態(tài)。
通用做法:將狀態(tài)封裝成獨(dú)立的類(狀態(tài)機(jī)),并將請(qǐng)求委托給當(dāng)前的狀態(tài)對(duì)象,當(dāng)對(duì)象的內(nèi)部狀態(tài)發(fā)生改變時(shí),會(huì)帶來(lái)不同的行為變化。
二、性能優(yōu)化點(diǎn)
1.如何管理狀態(tài)對(duì)象的創(chuàng)建和銷毀?第一種僅當(dāng)state對(duì)象被需要時(shí)才創(chuàng)建并隨后銷毀(state對(duì)象比較龐大,優(yōu)先選擇), 另一種是一開始就創(chuàng)建好所有的狀態(tài)對(duì)象,并且始終不銷毀它們(狀態(tài)改變頻繁)。
2.利用享元模式共享一個(gè)state對(duì)象。
舉個(gè)稍微復(fù)雜的例子,相信大家都玩過(guò)角色扮演類游戲,里面的角色就有很多種狀態(tài)(站、走、跑、跳、蹲等),各個(gè)狀態(tài)之間的切換是被規(guī)定好了的,且任何時(shí)刻都只能處于一種狀態(tài)中,而在每個(gè)狀態(tài)下,角色只能做當(dāng)前狀態(tài)下被允許的行為(如:普通攻擊、各種技能攻擊、防御等)
這是我寫的移動(dòng)小球的例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script> window.onload = function() { var FSM = { show1: { clickBtn: function (key) { change.call(this,key); } }, show2: { clickBtn: function (key) { change.call(this,key); } }, show3: { clickBtn: function (key) { change.call(this,key); } }, show4: { clickBtn: function (key) { change.call(this,key); } } }; var Ball = function () { this.curentState = FSM.show1; this.div = null; }; Ball.prototype.init = function () { var self = this; this.div = document.getElementById('go'); document.body.onkeydown = function (event) { var key = event.keyCode; self.curentState.clickBtn.call(self,key); } }; function change(key){ var styles = window.getComputedStyle(this.div), parentStyles = window.getComputedStyle(this.div.parentNode), top = parseInt(styles.top), left = parseInt(styles.left); if(key === 40){ top += (top+parseInt(styles.height))<parseInt(parentStyles.height) ? 10 : 0; this.div.style.top = top+'px'; this.curentState = FSM.show3; } if(key === 38){ top -= (top > 0 ? 10 : 0); this.div.style.top = top+'px'; this.curentState = FSM.show4; } if(key === 37){ left -= (left > 0 ? 10 : 0); this.div.style.left = left+'px'; this.curentState = FSM.show1; } if(key === 39){ this.curentState = FSM.show2; left += (left+parseInt(styles.width))<parseInt(parentStyles.width) ? 10 : 0; this.div.style.left = left+'px'; } } var a = new Ball(); a.init(); } </script> <style> #div{ position: absolute; width: 80%; height: 80%; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border: 1px solid darkcyan; } #go{ position:absolute; width:50px; height:50px; left: 10px; top:20px; border:1px solid gray; -webkit-border-radius : 50px; -moz-border-radius: 50px; border-radius: 50px; background-image: radial-gradient(circle, white 5%, black 100%); } </style> </head> <body> <div id="div">按下方向鍵移動(dòng)方塊 <div id="go"></div> </div> </body> </html>
三、JavaScript版本的狀態(tài)機(jī)(以簡(jiǎn)單的開關(guān)燈為例)
1.通過(guò)Function.prototype.call方法直接把請(qǐng)求委托給某個(gè)字面量對(duì)象來(lái)執(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() { // 請(qǐng)求委托給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() { // 請(qǐng)求委托給FSM狀態(tài)機(jī) self.currState.buttonWasPressed(); } } var light = new Light(); light.init();
狀態(tài)模式和策略模式很像,它們都封裝了一系列的算法或行為,它們都有一個(gè)上下文對(duì)象來(lái)把請(qǐng)求委托給封裝類(策略類、狀態(tài)機(jī)),但它們的意圖不同:
1.策略類的各個(gè)屬性之間是平等平行的,它們之間沒(méi)有任何聯(lián)系
2.狀態(tài)機(jī)中的各個(gè)狀態(tài)之間存在相互切換,且是被規(guī)定好了的。
參考文獻(xiàn): 《JavaScript模式》 《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Js為表單動(dòng)態(tài)添加節(jié)點(diǎn)內(nèi)容的方法
這篇文章主要介紹了Js為表單動(dòng)態(tài)添加節(jié)點(diǎn)內(nèi)容的方法,實(shí)例分析了js針對(duì)表單節(jié)點(diǎn)進(jìn)行添加操作的常用技巧,需要的朋友可以參考下2015-02-02原生JS版和jquery版實(shí)現(xiàn)checkbox的全選/全不選/點(diǎn)選/行內(nèi)點(diǎn)選(Mr.Think)
腳本之家小編之前整理不少checkbox全選全不選這方便的文章,但看了這篇以后發(fā)現(xiàn)實(shí)現(xiàn)方法更好2016-10-10JS實(shí)現(xiàn)添加,替換,刪除節(jié)點(diǎn)元素的方法
這篇文章主要介紹了JS實(shí)現(xiàn)添加,替換,刪除節(jié)點(diǎn)元素的方法,實(shí)例分析了javascript針對(duì)節(jié)點(diǎn)元素的替換、刪除及常用的幾種添加技巧,需要的朋友可以參考下2016-06-06JavaScript鼠標(biāo)拖動(dòng)事件監(jiān)聽(tīng)使用方法以及實(shí)例效果演示
最近工作中遇到了鼠標(biāo)拖動(dòng)事件監(jiān)聽(tīng)的相關(guān)需求,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript鼠標(biāo)拖動(dòng)事件監(jiān)聽(tīng)使用方法以及實(shí)例效果演示的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05