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

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

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

觀察者模式示例代碼

// 主題，保存狀態，狀態變化之后觸發所有觀察者對象 class Subject {constructor() {this.state = 0this.observers = []}getState() {return this.state}// 修改值的時候觸發觀察者（訂閱）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) 《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。