摘要：使用觀察者模式的好處支持簡單的廣播通信，自動通知所有已經訂閱過的對象。總的來說，觀察者模式所做的工作就是在解耦，讓耦合的雙方都依賴于抽象，而不是依賴于具體。

觀察者模式又叫發布訂閱模式（Publish/Subscribe），它定義了一種一對多的關系，讓多個觀察者對象同時監聽某一個主題對象，這個主題對象的狀態發生變化時就會通知所有的觀察者對象，使得它們能夠自動更新自己。

使用觀察者模式的好處：

支持簡單的廣播通信，自動通知所有已經訂閱過的對象。

目標對象與觀察者存在的是動態關聯，增加了靈活性。

目標對象與觀察者之間的抽象耦合關系能夠多帶帶擴展以及重用。

如下例子：

subscribers：含有不同 type 的數組，存儲有所有訂閱者的數組，訂閱行為將被加入到這個數組中

subscribe：方法為將訂閱者添加到 subscribers 中對應的數組中

unsubscribe：方法為在 subscribers 中刪除訂閱者

publish：循環遍歷 subscribers 中的每個元素，并調用他們注冊時提供的方法

let publisher = {
  subscribers: {
    any: []
  },
  subscribe: function(fn, type = "any") {
    if (typeof this.subscribers[type] === "undefined") {
      this.subscribers[type] = []
    }
    this.subscribers[type].push(fn)
  },
  unsubscribe: function(fn, type) {
    this.visitSubscribers("unsubscribe", fn, type)
  },
  publish: function(publication, type) {
    this.visitSubscribers("publish", publication, type)
  },
  visitSubscribers: function(action, arg, type = "any") {
    this.subscribers[type].forEach((currentValue, index, array) => {
      if (action === "publish") {
        currentValue(arg)
      } else if (action === "unsubscribe") {
        if (currentValue === arg) {
          this.subscribers[type].splice(index, 1)
        }
      }
    })
  }
}

let funcA = function(cl) {
  console.log("msg1" + cl)
}
let funcB = function(cl) {
  console.log("msg2" + cl)
}

publisher.subscribe(funcA)
publisher.subscribe(funcB)
publisher.unsubscribe(funcB)

publisher.publish(" in publisher")     // msg1 in publisher       

這里可以通過一個函數 makePublisher() 將一個對象復制成 publisher ，從而將其轉換成一個發布者。

function makePublisher(o) {
  Object.keys(publisher).forEach((curr, index, array) => {
    if (publisher.hasOwnProperty(curr) && typeof publisher[curr] === "function") {
      o[curr] = publisher[curr]
    }
  })
  o.subscribers={any:[]}
}

// 發行者對象
let paper = {
  daily: function() {
    this.publish("big news today")
  },
  monthly: function() {
    this.publish("interesting analysis", "monthly")
  }
}

makePublisher(paper)

// 訂閱對象
let joe = {
  drinkCoffee: function(paper) {
    console.log("Just read daily " + paper)
  },
  sundayPreNap: function(monthly) {
    console.log("Reading this monthly " + monthly)
  }
}

paper.subscribe(joe.drinkCoffee)
paper.subscribe(joe.sundayPreNap, "monthly")

paper.daily()         // Just read daily big news today
paper.monthly()         // Reading this monthly interesting analysis

使用ES6里的class稍微改造下：

class publisher {
    constructor() {
        this.subscribers = {
            any: []
        }
    }
    subscribe(fn, type = "any") {
        if (typeof this.subscribers[type] === "undefined") {
            this.subscribers[type] = []
        }
        this.subscribers[type].push(fn)
    }
    unsubscribe(fn, type) {
        this.visitSubscribers("unsubscribe", fn, type)
    }
    publish(publication, type) {
        this.visitSubscribers("publish", publication, type)
    }
    visitSubscribers(action, arg, type = "any") {
        this.subscribers[type].forEach((currentValue, index, array) => {
            if (action === "publish") {
                currentValue(arg)
            } else if (action === "unsubscribe") {
                if (currentValue === arg) {
                    this.subscribers[type].splice(index, 1)
                }
            }
        })
    }
}

let publish = new publisher();

let funcA = function(cl) {
    console.log("msg1" + cl)
}
let funcB = function(cl) {
    console.log("msg2" + cl)
}

publish.subscribe(funcA)
publish.subscribe(funcB)
publish.unsubscribe(funcB)

publish.publish(" in publisher")     // msg1 in publisher

以上兩個方法都是《JavaScript模式》里介紹的，這里貼上個自己實現的，感覺看起來舒服點...

使用IIFE的方法：

const Observer = (function() {
  const _message = {}  // 消息隊列
  return {
    regist(type, fn) {          // 訂閱
      _message[type]
          ? _message[type].push(fn)
          : _message[type] = [fn]
    },
    emit(type, payload) {          // 發布
      if (!_message[type]) {
        return
      }
      _message[type].forEach(event => event(payload))
    },
    remove(type, fn) {            // 退訂
      if (!_message[type].includes(fn)) {return}
      const idx = _message[type].indexOf(fn)
      _message[type].splice(idx, 1)
    }
  }
})()

使用ES6的class方法

class Observer {
  constructor() {
    this._message = {}
  }
  
  regist(type, fn) {          // 訂閱
    this._message[type]
        ? this._message[type].push(fn)
        : this._message[type] = [fn]
  }
  
  emit(type, payload) {          // 發布
    if (!this._message[type]) {
      return
    }
    this._message[type].forEach(event => event(payload))
  }
  
  remove(type, fn) {            // 退訂
    if (!this._message[type].includes(fn)) {return}
    const idx = this._message[type].indexOf(fn)
    this._message[type].splice(idx, 1)
  }
}

觀察者的使用場合就是：當一個對象的改變需要同時改變其它對象，并且它不知道具體有多少對象需要改變的時候，就應該考慮使用觀察者模式。

總的來說，觀察者模式所做的工作就是在解耦，讓耦合的雙方都依賴于抽象，而不是依賴于具體。從而使得各自的變化都不會影響到另一邊的變化。

本文是系列文章，可以相互參考印證，共同進步~

JS 抽象工廠模式
JS 工廠模式
JS 建造者模式
JS 原型模式
JS 單例模式
JS 回調模式
JS 外觀模式
JS 適配器模式
JS 利用高階函數實現函數緩存(備忘模式)
JS 狀態模式
JS 橋接模式
JS 觀察者模式

網上的帖子大多深淺不一，甚至有些前后矛盾，在下的文章都是學習過程中的總結，如果發現錯誤，歡迎留言指出~

參考：
設計模式之觀察者模式 
《JavaScript模式》
《Javascript 設計模式》 - 張榮銘

PS：歡迎大家關注我的公眾號【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，長按識別下面二維碼即可加我好友，備注加群，我拉你入群～