欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

學(xué)習(xí)JavaScript設(shè)計(jì)模式之狀態(tài)模式

 更新時(shí)間：2016年01月08日 17:08:14   作者：奮飛  
這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的狀態(tài)模式，對(duì)JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下

狀態(tài)模式的關(guān)鍵是區(qū)分事物內(nèi)部的狀態(tài)，事物內(nèi)部狀態(tài)的改變往往會(huì)帶來(lái)事物的行為改變。

當(dāng)電燈開(kāi)著，此時(shí)按下開(kāi)關(guān)，電燈會(huì)切換到關(guān)閉狀態(tài)；再按一次開(kāi)關(guān)，電燈又將被打開(kāi)。同一個(gè)開(kāi)關(guān)在不同的狀態(tài)下，表現(xiàn)出來(lái)的行為是不一樣的。

一、有限狀態(tài)機(jī)

  • 狀態(tài)總數(shù)（state）是有限的。
  • 任一時(shí)刻，只處在一種狀態(tài)之中。
  • 某種條件下，會(huì)從一種狀態(tài)轉(zhuǎn)變（transition）到另一種狀態(tài)。

允許一個(gè)對(duì)象在其內(nèi)部狀態(tài)改變時(shí)改變它的行為，對(duì)象看起來(lái)似乎修改了它的類。
解釋：
（1）將狀態(tài)封裝成獨(dú)立的類，并將請(qǐng)求委托給當(dāng)前的狀態(tài)對(duì)象，當(dāng)對(duì)象的內(nèi)部狀態(tài)發(fā)生改變時(shí)，會(huì)帶來(lái)不同的行為變化。
（2）使用的對(duì)象，在不同的狀態(tài)下具有截然不同的行為（委托效果）

談到封裝，一般優(yōu)先考慮封裝對(duì)象的行為，而不是對(duì)象的狀態(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(){
  /* 開(kāi)關(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 = '開(kāi)關(guān)';
  this.currentState = this.offLight;
  this.button.click = function() {
    self.currentState.buttonWasPressed();
  }
};
// 讓抽象父類的抽象方法直接拋出一個(gè)異常（避免狀態(tài)子類未實(shí)現(xiàn)buttonWasPressed方法）
Light.prototype.buttonWasPressed = function() {
  throw new Error("父類的buttonWasPressed方法必須被重寫(xiě)");
};
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：說(shuō)明補(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ù)聲明會(huì)被提升到普通變量之前。

三、性能優(yōu)化點(diǎn)

（1）如何管理狀態(tài)對(duì)象的創(chuàng)建和銷毀？
第一種僅當(dāng)state對(duì)象被需要時(shí)才創(chuàng)建并隨后銷毀（state對(duì)象比較龐大，優(yōu)先選擇），
另一種是一開(kāi)始就創(chuàng)建好所有的狀態(tài)對(duì)象，并且始終不銷毀它們（狀態(tài)改變頻繁）。
（2）利用享元模式共享一個(gè)state對(duì)象。

四、JavaScript版本的狀態(tài)機(jī)

（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 = "下一次按我是開(kāi)燈";   // 這是Light上的屬性?。。?
      this.currState = FSM.on;            // 這是Light上的屬性?。?！
    }
  },
  on: {
    buttonWasPressed: function() {
      console.log("開(kāi)燈");
      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 = "下一次按我是開(kāi)燈";
      this.currState = this.onState;
    }
  },
  on: {
    buttonWasPressed: function() {
      console.log("開(kāi)燈");
      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();

希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論