JavaScript設計模式中的觀察者模式
觀察者設計模式
觀察者設計模式中分為被觀察者和觀察者,當被觀察者觸發(fā)了某個邊界條件,觀察者就會觸發(fā)事件,這里需要倆個構造函數進行觀察者設計模式一個是被觀察者一個是觀察者
我們來利用觀察者監(jiān)聽對象某個屬性的修改操作,對象某個屬性的修改會觸發(fā)觀察者的某些方法
初始數據
let obj = {
name: "若水"
}
被觀察者
創(chuàng)建被觀察者,我們給被觀察者定義一個初始化狀態(tài),用于記錄觀察屬性的初始值,還需定義一個觀察者方法隊列,用于對觀察者的增刪操作且還用于觸發(fā)觀察者身上的方法,被觀察者類身上還有三個方法,修改被觀察者屬性方法,修改被觀察者屬性方法一是用于修改被觀察者值,二是用于觸發(fā)自身上的觀察者方法,添加觀察者方法,用于給自身上添加觀察者,刪除觀察者方法,用于刪除自身上的觀察者
// 被觀察者類
class Subject {
//未傳值初始為空
constructor(state = "") {
// 初始狀態(tài)
this.state = state
// 觀察者方法隊列
this.observsers = []
}
// 設置自己的狀態(tài)
setState(val) {
// 告訴觀察者目前改變成了什么狀態(tài)
this.state = val;
// 同時需要把自己身上的觀察者方法全部觸發(fā)
this.observsers.map(item => {
// item是每一個觀察者,每一個觀察者是一個對象
item.callback(this.state);
})
}
// 添加觀察者
addObserver(observer) {
// 把觀察者傳遞進來
this.observsers.push(observer)
}
// 刪除觀察者
removeObserver(observer) {
// 過濾出來非當前觀察者的觀察者
this.observsers = this.observsers.filter(obs => obs !== observer);
}
}
觀察者
創(chuàng)建觀察者,用于定義觀察者的身份以及執(zhí)行觀察者的方法,觀察者有一個屬性是表示自己的身份,一個是自己方法,用于被觀察者觸發(fā)使用
// 觀察者類
class Observer {
// name需要觀察的參數
// callback 觀察的參數達到邊界條件觸發(fā)的事件
constructor(name, callback = () => { }) {
this.name = name;
this.callback = callback;
}
}
最后我們來使用一下:
// 創(chuàng)建觀察者
const ObserverName = new Observer('監(jiān)聽obj改變', () => { console.log('obj發(fā)生改變'); })
//?創(chuàng)建一個被觀察者
????????const?name?=?new?Subject(obj.name)
//?添加一個觀察者
????????name.addObserver(ObserverName)
//觸發(fā)觀察者方法
name.setState('前端若水')
觀察者設計模式適用于監(jiān)聽一對多的操作,例如監(jiān)聽對象屬性的修改等等,觀察者模式能夠降低代碼耦合度,提升可擴展性,但是被觀察者擁有過多的觀察者進行監(jiān)聽會提高運行時間以及程序的復雜程度
到此這篇關于JavaScript設計模式中的觀察者模式的文章就介紹到這了,更多相關JavaScript 觀察者模式內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
淺談JS中String()與 .toString()的區(qū)別
下面小編就為大家?guī)硪黄獪\談JS中String()與 .toString()的區(qū)別。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
動態(tài)規(guī)劃之使用備忘錄來改進Javascript函數
這篇文章主要介紹了動態(tài)規(guī)劃之使用備忘錄來改進Javascript函數,動態(tài)規(guī)劃它既是一種數學優(yōu)化方法,也是一種計算機編程方法,下文相關資料介紹需要的小伙伴可以參考一下2022-04-04
Microsoft Ajax Minifier 壓縮javascript的方法
使用Microsoft AJAX 庫 (第六個預覽版) 其中有一個 ajaxmin.exe 可以壓縮Js文件可以在dos 命令下 /? 查看其參數說明。2010-03-03

