javascript之狀態(tài)模式

warnerwu 發(fā)布于2019-08-26 10:57 / 409人閱讀

摘要：狀態(tài)模式狀態(tài)模式將事物內(nèi)部的每個狀態(tài)分別封裝成類內(nèi)部狀態(tài)改變會產(chǎn)生不同行為。將狀態(tài)封裝成不同類打開強(qiáng)光關(guān)燈打開弱光初始狀態(tài)按鈕非面向?qū)ο髮?shí)現(xiàn)的狀態(tài)模式借助于的委托機(jī)制可以像如下實(shí)現(xiàn)狀態(tài)模式打開強(qiáng)光關(guān)燈打開弱光按鈕通過完成委托

狀態(tài)模式

狀態(tài)模式: 將事物內(nèi)部的每個狀態(tài)分別封裝成類, 內(nèi)部狀態(tài)改變會產(chǎn)生不同行為。

優(yōu)點(diǎn): 用對象代替字符串記錄當(dāng)前狀態(tài), 狀態(tài)易維護(hù)

缺點(diǎn): 需編寫大量狀態(tài)類對象
場景 demo
某某牌電燈, 按一下按鈕打開弱光, 按兩下按鈕打開強(qiáng)光, 按三下按鈕關(guān)閉燈光。

//  將狀態(tài)封裝成不同類
const weakLight = function(){
  this.light = light
}
weakLight.prototype.press = function(){
  console.log("打開強(qiáng)光")
  this.light.setState(this.light.strongLight)
}
const strongLight = function(){
  this.light= light
}
strongLight.prototype.press = function(){
  console.log("關(guān)燈")
  this.light.setState(this.light.offLight)
}
const offLight = function(){
  this.light= light
}
offLight.prototype.press = function(){
  console.log("打開弱光")
  this.light.setState(this.light.weakLight)
}
 const Light = function(){
   this.weakLight = new weakLight(this)
   this.strongLight = new strongLight(this)
   this.offLight = new offLight(this)
   this.currentState = this.offLight //初始狀態(tài)
 }
 Light.prototype.init = function(){
   const btn = doucment.createElement("button")
   btn.innerHTML = "按鈕"
   document.body.append(btn)
   const self = this
   btn.addEventListener("click",function(){
     self.currentState.press()
   })
 }
 Light.prototype.setState = function(state){
  this.currentState = state
 }
 const light = new Light()
 light.init()

非面向?qū)ο髮?shí)現(xiàn)的狀態(tài)模式

// 借助于javascript的委托機(jī)制  可以像如下實(shí)現(xiàn)狀態(tài)模式
const obj = {
  "weakLight": {
    press: function(){
      console.log("打開強(qiáng)光")
      this.currentState = obj.strongLight
    }
  },
  "strongLight": {
    press: function(){
      console.log("關(guān)燈")
      this.currentState = obj.offLight
    }
  },
  "offLight": {
    press: function(){
      console.log("打開弱光")
      this.currentState = obj.weakLight
    }
  },
}
 const Light = function(){
   this.currentState = obj.offLight
 }
 Light.prototype.init = function(){
   const btn = document.createElement("button")
   btn.innerHTML = "按鈕"
   document.body.append(btn)
   const self = this
   btn.addEventListener("click",function(){
     self.currentState.press.call(self) //通過call完成委托
   })
 }
 const light = new Light()
 light.init()