JavaScript設(shè)計(jì)模式中的觀察者模式
觀察者設(shè)計(jì)模式
觀察者設(shè)計(jì)模式中分為被觀察者和觀察者,當(dāng)被觀察者觸發(fā)了某個(gè)邊界條件,觀察者就會(huì)觸發(fā)事件,這里需要倆個(gè)構(gòu)造函數(shù)進(jìn)行觀察者設(shè)計(jì)模式一個(gè)是被觀察者一個(gè)是觀察者
我們來(lái)利用觀察者監(jiān)聽(tīng)對(duì)象某個(gè)屬性的修改操作,對(duì)象某個(gè)屬性的修改會(huì)觸發(fā)觀察者的某些方法
初始數(shù)據(jù)
let obj = { name: "若水" }
被觀察者
創(chuàng)建被觀察者,我們給被觀察者定義一個(gè)初始化狀態(tài),用于記錄觀察屬性的初始值,還需定義一個(gè)觀察者方法隊(duì)列,用于對(duì)觀察者的增刪操作且還用于觸發(fā)觀察者身上的方法,被觀察者類身上還有三個(gè)方法,修改被觀察者屬性方法,修改被觀察者屬性方法一是用于修改被觀察者值,二是用于觸發(fā)自身上的觀察者方法,添加觀察者方法,用于給自身上添加觀察者,刪除觀察者方法,用于刪除自身上的觀察者
// 被觀察者類 class Subject { //未傳值初始為空 constructor(state = "") { // 初始狀態(tài) this.state = state // 觀察者方法隊(duì)列 this.observsers = [] } // 設(shè)置自己的狀態(tài) setState(val) { // 告訴觀察者目前改變成了什么狀態(tài) this.state = val; // 同時(shí)需要把自己身上的觀察者方法全部觸發(fā) this.observsers.map(item => { // item是每一個(gè)觀察者,每一個(gè)觀察者是一個(gè)對(duì)象 item.callback(this.state); }) } // 添加觀察者 addObserver(observer) { // 把觀察者傳遞進(jìn)來(lái) this.observsers.push(observer) } // 刪除觀察者 removeObserver(observer) { // 過(guò)濾出來(lái)非當(dāng)前觀察者的觀察者 this.observsers = this.observsers.filter(obs => obs !== observer); } }
觀察者
創(chuàng)建觀察者,用于定義觀察者的身份以及執(zhí)行觀察者的方法,觀察者有一個(gè)屬性是表示自己的身份,一個(gè)是自己方法,用于被觀察者觸發(fā)使用
// 觀察者類 class Observer { // name需要觀察的參數(shù) // callback 觀察的參數(shù)達(dá)到邊界條件觸發(fā)的事件 constructor(name, callback = () => { }) { this.name = name; this.callback = callback; } }
最后我們來(lái)使用一下:
// 創(chuàng)建觀察者 const ObserverName = new Observer('監(jiān)聽(tīng)obj改變', () => { console.log('obj發(fā)生改變'); }) //?創(chuàng)建一個(gè)被觀察者 ????????const?name?=?new?Subject(obj.name) //?添加一個(gè)觀察者 ????????name.addObserver(ObserverName) //觸發(fā)觀察者方法 name.setState('前端若水')
觀察者設(shè)計(jì)模式適用于監(jiān)聽(tīng)一對(duì)多的操作,例如監(jiān)聽(tīng)對(duì)象屬性的修改等等,觀察者模式能夠降低代碼耦合度,提升可擴(kuò)展性,但是被觀察者擁有過(guò)多的觀察者進(jìn)行監(jiān)聽(tīng)會(huì)提高運(yùn)行時(shí)間以及程序的復(fù)雜程度
到此這篇關(guān)于JavaScript設(shè)計(jì)模式中的觀察者模式的文章就介紹到這了,更多相關(guān)JavaScript 觀察者模式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JavaScript設(shè)計(jì)模式之觀察者模式與發(fā)布訂閱模式詳解
- javascript設(shè)計(jì)模式 – 觀察者模式原理與用法實(shí)例分析
- JavaScript設(shè)計(jì)模式之觀察者模式實(shí)例詳解
- JavaScript設(shè)計(jì)模式之觀察者模式(發(fā)布訂閱模式)原理與實(shí)現(xiàn)方法示例
- JS設(shè)計(jì)模式之觀察者模式實(shí)現(xiàn)實(shí)時(shí)改變頁(yè)面中金額數(shù)的方法
- NodeJS設(shè)計(jì)模式總結(jié)【單例模式,適配器模式,裝飾模式,觀察者模式】
- Javascript設(shè)計(jì)模式之觀察者模式(推薦)
- Javascript設(shè)計(jì)模式之觀察者模式的多個(gè)實(shí)現(xiàn)版本實(shí)例
- JavaScript設(shè)計(jì)模式之觀察者模式(發(fā)布者-訂閱者模式)
相關(guān)文章
js控制一個(gè)按鈕是否可點(diǎn)擊(可使用)disabled的實(shí)例
下面小編就為大家?guī)?lái)一篇js控制一個(gè)按鈕是否可點(diǎn)擊(可使用)disabled的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02JavaScript實(shí)現(xiàn)相冊(cè)彈窗功能(zepto.js)
這篇文章主要介紹了JavaScript基于zepto.js實(shí)現(xiàn)相冊(cè)彈窗功能的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06JS回調(diào)函數(shù)的應(yīng)用簡(jiǎn)單實(shí)例
這篇文章主要分享了JS回調(diào)函數(shù)應(yīng)用的簡(jiǎn)單實(shí)例,比較實(shí)用,需要的朋友可以參考下2014-09-09微信小程序登錄態(tài)和檢驗(yàn)注冊(cè)過(guò)沒(méi)的app.js寫法
這篇文章主要介紹了小程序登錄態(tài)和檢驗(yàn)注冊(cè)過(guò)沒(méi)的app.js寫法, 本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的借鑒價(jià)值,需要的朋友可以參考下2019-05-05移動(dòng)端H5喚起APP的寫法實(shí)例(IOS、android)
最近在做掃碼之后的h5頁(yè)面喚醒App的功能,所以記錄一下,這篇文章主要給大家介紹了關(guān)于移動(dòng)端H5喚起APP的相關(guān)資料,需要的朋友可以參考下2021-07-07