javascript之狀態模式

warnerwu 發布于2019-08-26 10:57 / 417人閱讀

摘要：狀態模式狀態模式將事物內部的每個狀態分別封裝成類內部狀態改變會產生不同行為。將狀態封裝成不同類打開強光關燈打開弱光初始狀態按鈕非面向對象實現的狀態模式借助于的委托機制可以像如下實現狀態模式打開強光關燈打開弱光按鈕通過完成委托

狀態模式

狀態模式: 將事物內部的每個狀態分別封裝成類, 內部狀態改變會產生不同行為。

優點: 用對象代替字符串記錄當前狀態, 狀態易維護

缺點: 需編寫大量狀態類對象
場景 demo
某某牌電燈, 按一下按鈕打開弱光, 按兩下按鈕打開強光, 按三下按鈕關閉燈光。

//  將狀態封裝成不同類
const weakLight = function(){
  this.light = light
}
weakLight.prototype.press = function(){
  console.log("打開強光")
  this.light.setState(this.light.strongLight)
}
const strongLight = function(){
  this.light= light
}
strongLight.prototype.press = function(){
  console.log("關燈")
  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 //初始狀態
 }
 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()

非面向對象實現的狀態模式

// 借助于javascript的委托機制  可以像如下實現狀態模式
const obj = {
  "weakLight": {
    press: function(){
      console.log("打開強光")
      this.currentState = obj.strongLight
    }
  },
  "strongLight": {
    press: function(){
      console.log("關燈")
      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()

云服務器 GPU云服務器 Java設計模式之（五）——代理模式狀態模式 java狀態模式代碼 javascript命令模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106899.html

設計模式手冊之狀態模式

摘要：什么是狀態模式狀態模式對象行為是基于狀態來改變的。原文地址設計模式手冊之狀態模式優缺點優點封裝了轉化規則，對于大量分支語句，可以考慮使用狀態類進一步封裝。 1. 什么是狀態模式？狀態模式：對象行為是基于狀態來改變的。內部的狀態轉化，導致了行為表現形式不同。所以，用戶在外面看起來，好像是修改了行為。 Webpack4系列教程(17篇) + 設計模式手冊(16篇)：GitHub地址博...

call_me_R 2019-08-26 13:34 評論0 收藏0
設計模式手冊之狀態模式

摘要：什么是狀態模式狀態模式對象行為是基于狀態來改變的。原文地址設計模式手冊之狀態模式優缺點優點封裝了轉化規則，對于大量分支語句，可以考慮使用狀態類進一步封裝。 1. 什么是狀態模式？狀態模式：對象行為是基于狀態來改變的。內部的狀態轉化，導致了行為表現形式不同。所以，用戶在外面看起來，好像是修改了行為。 Webpack4系列教程(17篇) + 設計模式手冊(16篇)：GitHub地址博...

Faremax 2019-07-31 10:09 評論0 收藏0
每天一個設計模式之享元模式

摘要：作者按每天一個設計模式旨在初步領會設計模式的精髓，目前采用和兩種語言實現。享元模式提醒我們將一個對象的屬性劃分為內部和外部狀態。作者按：《每天一個設計模式》旨在初步領會設計模式的精髓，目前采用javascript和python兩種語言實現。誠然，每種設計模式都有多種實現方式，但此小冊只記錄最直截了當的實現方式 :) 個人技術博客-godbmw.com 歡迎來玩! 每周至少 1 篇原創...

jone5679 2019-08-23 14:11 評論0 收藏0
每天一個設計模式之享元模式

摘要：作者按每天一個設計模式旨在初步領會設計模式的精髓，目前采用和兩種語言實現。享元模式提醒我們將一個對象的屬性劃分為內部和外部狀態。作者按：《每天一個設計模式》旨在初步領會設計模式的精髓，目前采用javascript和python兩種語言實現。誠然，每種設計模式都有多種實現方式，但此小冊只記錄最直截了當的實現方式 :) 個人技術博客-godbmw.com 歡迎來玩! 每周至少 1 篇原創...

ormsf 2019-07-30 18:40 評論0 收藏0
前端進階資源整理

摘要：前端進階進階構建項目一配置最佳實踐狀態管理之痛點分析與改良開發中所謂狀態淺析從時間旅行的烏托邦，看狀態管理的設計誤區使用更好地處理數據愛彼迎房源詳情頁中的性能優化從零開始，在中構建時間旅行式調試用輕松管理復雜狀態如何把業務邏輯這個故事講好和前端進階 webpack webpack進階構建項目(一) Webpack 4 配置最佳實踐 react Redux狀態管理之痛點、分析與...

BlackMass 2019-08-23 12:36 評論0 收藏0