快捷導(dǎo)航

輕松掌握J(rèn)avaScript狀態(tài)模式

更新時(shí)間：2016年09月07日 10:31:51 作者：蘇福

這篇文章主要幫助大家輕松掌握J(rèn)avaScript狀態(tài)模式,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

狀態(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: