資訊專欄INFORMATION COLUMN
摘要：狀態(tài)模式狀態(tài)模式將事物內(nèi)部的每個(gè)狀態(tài)分別封裝成類內(nèi)部狀態(tài)改變會(huì)產(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)燈打開弱光按鈕通過(guò)完成委托
狀態(tài)模式
狀態(tài)模式: 將事物內(nèi)部的每個(gè)狀態(tài)分別封裝成類, 內(nèi)部狀態(tài)改變會(huì)產(chǎn)生不同行為。
優(yōu)點(diǎn): 用對(duì)象代替字符串記錄當(dāng)前狀態(tài), 狀態(tài)易維護(hù)
缺點(diǎn): 需編寫大量狀態(tài)類對(duì)象
場(chǎng)景 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) //通過(guò)call完成委托
})
}
const light = new Light()
light.init()
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/106899.html
摘要：什么是狀態(tài)模式狀態(tài)模式對(duì)象行為是基于狀態(tài)來(lái)改變的。原文地址設(shè)計(jì)模式手冊(cè)之狀態(tài)模式優(yōu)缺點(diǎn)優(yōu)點(diǎn)封裝了轉(zhuǎn)化規(guī)則，對(duì)于大量分支語(yǔ)句，可以考慮使用狀態(tài)類進(jìn)一步封裝。 1. 什么是狀態(tài)模式？ 狀態(tài)模式：對(duì)象行為是基于狀態(tài)來(lái)改變的。 內(nèi)部的狀態(tài)轉(zhuǎn)化，導(dǎo)致了行為表現(xiàn)形式不同。所以，用戶在外面看起來(lái)，好像是修改了行為。 Webpack4系列教程(17篇) + 設(shè)計(jì)模式手冊(cè)(16篇)：GitHub地址 博...
摘要：什么是狀態(tài)模式狀態(tài)模式對(duì)象行為是基于狀態(tài)來(lái)改變的。原文地址設(shè)計(jì)模式手冊(cè)之狀態(tài)模式優(yōu)缺點(diǎn)優(yōu)點(diǎn)封裝了轉(zhuǎn)化規(guī)則，對(duì)于大量分支語(yǔ)句，可以考慮使用狀態(tài)類進(jìn)一步封裝。 1. 什么是狀態(tài)模式？ 狀態(tài)模式：對(duì)象行為是基于狀態(tài)來(lái)改變的。 內(nèi)部的狀態(tài)轉(zhuǎn)化，導(dǎo)致了行為表現(xiàn)形式不同。所以，用戶在外面看起來(lái)，好像是修改了行為。 Webpack4系列教程(17篇) + 設(shè)計(jì)模式手冊(cè)(16篇)：GitHub地址 博...
摘要：作者按每天一個(gè)設(shè)計(jì)模式旨在初步領(lǐng)會(huì)設(shè)計(jì)模式的精髓，目前采用和兩種語(yǔ)言實(shí)現(xiàn)。享元模式提醒我們將一個(gè)對(duì)象的屬性劃分為內(nèi)部和外部狀態(tài)。 作者按：《每天一個(gè)設(shè)計(jì)模式》旨在初步領(lǐng)會(huì)設(shè)計(jì)模式的精髓，目前采用javascript和python兩種語(yǔ)言實(shí)現(xiàn)。誠(chéng)然，每種設(shè)計(jì)模式都有多種實(shí)現(xiàn)方式，但此小冊(cè)只記錄最直截了當(dāng)?shù)膶?shí)現(xiàn)方式 :) 個(gè)人技術(shù)博客-godbmw.com 歡迎來(lái)玩! 每周至少 1 篇原創(chuàng)...
摘要：作者按每天一個(gè)設(shè)計(jì)模式旨在初步領(lǐng)會(huì)設(shè)計(jì)模式的精髓，目前采用和兩種語(yǔ)言實(shí)現(xiàn)。享元模式提醒我們將一個(gè)對(duì)象的屬性劃分為內(nèi)部和外部狀態(tài)。 作者按：《每天一個(gè)設(shè)計(jì)模式》旨在初步領(lǐng)會(huì)設(shè)計(jì)模式的精髓，目前采用javascript和python兩種語(yǔ)言實(shí)現(xiàn)。誠(chéng)然，每種設(shè)計(jì)模式都有多種實(shí)現(xiàn)方式，但此小冊(cè)只記錄最直截了當(dāng)?shù)膶?shí)現(xiàn)方式 :) 個(gè)人技術(shù)博客-godbmw.com 歡迎來(lái)玩! 每周至少 1 篇原創(chuàng)...
摘要：前端進(jìn)階進(jìn)階構(gòu)建項(xiàng)目一配置最佳實(shí)踐狀態(tài)管理之痛點(diǎn)分析與改良開發(fā)中所謂狀態(tài)淺析從時(shí)間旅行的烏托邦，看狀態(tài)管理的設(shè)計(jì)誤區(qū)使用更好地處理數(shù)據(jù)愛(ài)彼迎房源詳情頁(yè)中的性能優(yōu)化從零開始，在中構(gòu)建時(shí)間旅行式調(diào)試用輕松管理復(fù)雜狀態(tài)如何把業(yè)務(wù)邏輯這個(gè)故事講好和 前端進(jìn)階 webpack webpack進(jìn)階構(gòu)建項(xiàng)目(一) Webpack 4 配置最佳實(shí)踐 react Redux狀態(tài)管理之痛點(diǎn)、分析與...
閱讀 3844·2023-04-26 02:07
閱讀 3290·2021-09-22 15:55
閱讀 2609·2021-07-26 23:38
閱讀 3209·2019-08-29 15:16
閱讀 2068·2019-08-29 11:16
閱讀 1828·2019-08-29 11:00
閱讀 3720·2019-08-26 18:36
閱讀 3230·2019-08-26 13:32
