js設計模式-觀察者模式

定義：

觀察者模式又叫發佈訂閱模式，它定義了對象間的一種一對多的依賴關係。觀察者模式讓兩個對象鬆耦合地聯繫在一塊兒，雖然不太清楚彼此的細節，但這不影響他們之間的互相通訊。

思路

定義一個對象，在對象中實現註冊事件，關閉事件和觸發事件。

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];
        }
      }
    }

優勢：

1. 支持簡單的廣播通訊，自動通知全部已經訂閱過的對象。
2. 頁面載入後目標對象很容易與觀察者存在一種動態關聯，增長了靈活性。
3. 目標對象與觀察者之間的抽象耦合關係可以單獨擴展以及重用。

應用：

dom2級的事件處理程序就用了該模式。/ * node.js的不少模塊也運用了該模式。*/

參考

• JavaScript設計模式與開發實戰 曾探
• JavaScript設計模式之觀察者模式（學習筆記）
• JS設計模式——觀察者模式（通俗易懂）