觀察者模式又稱為發(fā)布-訂閱模式，它定義了對象間的一種一對多的依賴關(guān)系，當(dāng)一個對象的狀態(tài)發(fā)生改變時，所有依賴它的對象都將得到通知。觀察者模式一個非常常見的例子就是DOM節(jié)點(diǎn)上的事件綁定。當(dāng)body對象被點(diǎn)擊時，body節(jié)點(diǎn)就會向訂閱者發(fā)布這個消息。

document.body.addEventListener('click', function() {alert(2) }, false)document.body.click()

另外，Promise中的then返回也是一種發(fā)布-訂閱的模式。當(dāng)獲得到數(shù)據(jù)之后（Promise狀態(tài)發(fā)生變化），觸發(fā)訂閱。或者Vue中組件生命周期觸發(fā)，以及Vue watch

觀察者模式示例代碼

// 主題，保存狀態(tài)，狀態(tài)變化之后觸發(fā)所有觀察者對象 class Subject {constructor() {this.state = 0this.observers = []}getState() {return this.state}// 修改值的時候觸發(fā)觀察者（訂閱）setState(state) {this.state = statethis.notifyAllObservers()}notifyAllObservers() {this.observes.forEach(observer => {observer.update()})}attach(observer) {this.observers.push(observer)} }// 觀察者 class Observer {constructor(name, subject) {this.name = namethis.subject = subject// 把觀察者添加到subject中this.subject.attach(this)}update() {console.log(`${this.name} update, state: ${this.subject.getState}`)} }// 測試 let s = new Subject() let o1 = new Observer('o1', s) let o2 = new Observer('o2', s) let o3 = new Observer('o3', s)s.setState(1) 《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的JavaScript观察者模式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。