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