js設計模式-觀察者模式
阿新 • • 發佈:2019-02-24
訂閱 his gist cnblogs 觀察 ado per ssh 通知
定義:
觀察者模式又叫發布訂閱模式,它定義了對象間的一種一對多的依賴關系。觀察者模式讓兩個對象松耦合地聯系在一起,雖然不太清楚彼此的細節,但這不影響他們之間的互相通信。
思路
定義一個對象,在對象中實現註冊事件,關閉事件和觸發事件。
js 簡單實現
var Observer = { data: {}, // 訂閱 register: function (event, func) { if (this.data[event]) { this.data[event].push(func); } else { this.data[event] = [func]; } }, // 發布 triggle: function (event) { let evtList = this.data[event]; if (evtList) { for (let i = 0; i < evtList.length; i++) { evtList[i](); } } else { return false; } }, // 退訂 off: function (event, func) { let evtList = this.data[event]; if (evtList) { evtList.forEach(function (item, index, arr) { if (item === func) { arr.splice(index, 1); } }) } else { return false; } if (!evtList.length) { delete this.data[event]; } } }
優點:
- 支持簡單的廣播通信,自動通知所有已經訂閱過的對象。
- 頁面載入後目標對象很容易與觀察者存在一種動態關聯,增加了靈活性。
- 目標對象與觀察者之間的抽象耦合關系能夠單獨擴展以及重用。
應用:
dom2級的事件處理程序就用了該模式。/ * node.js的很多模塊也運用了該模式。*/
參考
- JavaScript設計模式與開發實戰 曾探
- JavaScript設計模式之觀察者模式(學習筆記)
- JS設計模式——觀察者模式(通俗易懂)
js設計模式-觀察者模式