訂閱發佈模式和觀察者模式的區別

時間 2019-11-29

標籤訂閱發佈模式觀察者區別简体版

原文原文鏈接

首先咱們須要瞭解二者的定義和實現的方式，才能更好的區分二者的不一樣點。javascript

或許之前認爲訂閱發佈模式是觀察者模式的一種別稱，可是發展至今，概念已經有了很多區別。html

訂閱發佈模式

在軟件架構中，發佈-訂閱是一種消息範式，消息的發送者（稱爲發佈者）不會將消息直接發送給特定的接收者（稱爲訂閱者）。而是將發佈的消息分爲不一樣的類別，無需瞭解哪些訂閱者（若是有的話）可能存在。一樣的，訂閱者能夠表達對一個或多個類別的興趣，只接收感興趣的消息，無需瞭解哪些發佈者（若是有的話）存在。前端

或許你用過 eventemitter、node 的 events、Backbone 的 events 等等，這些都是前端早期，比較流行的數據流通訊方式，即訂閱發佈模式。java

從字面意思來看，咱們須要首先訂閱，發佈者發佈消息後纔會收到發佈的消息。不過咱們還須要一箇中間者來協調，從事件角度來講，這個中間者就是事件中心，協調發布者和訂閱者直接的消息通訊。node

完成訂閱發佈整個流程須要三個角色：數組

發佈者
事件中心
訂閱者

以事件爲例，簡單流程以下：架構

發佈者->事件中心<=>訂閱者，訂閱者須要向事件中心訂閱指定的事件 -> 發佈者向事件中心發佈指定事件內容 -> 事件中心通知訂閱者 -> 訂閱者收到消息（多是多個訂閱者），到此完成了一次訂閱發佈的流程。app

簡單的代碼實現以下：dom

class Event {
  constructor() {
    // 全部 eventType 監聽器回調函數（數組）
    this.listeners = {}
  }
  /** * 訂閱事件 * @param {String} eventType 事件類型 * @param {Function} listener 訂閱後發佈動做觸發的回調函數，參數爲發佈的數據 */
  on(eventType, listener) {
    if (!this.listeners[eventType]) {
      this.listeners[eventType] = []
    }
    this.listeners[eventType].push(listener)
  }
  /** * 發佈事件 * @param {String} eventType 事件類型 * @param {Any} data 發佈的內容 */
  emit(eventType, data) {
    const callbacks = this.listeners[eventType]
    if (callbacks) {
      callbacks.forEach((c) => {
        c(data)
      })
    }
  }
}

const event = new Event()
event.on('open', (data) => {
  console.log(data)
})
event.emit('open', { open: true })
複製代碼

Event 能夠理解爲事件中心，提供了訂閱和發佈功能。函數

訂閱者在訂閱事件的時候，只關注事件自己，而不關心誰會發布這個事件；發佈者在發佈事件的時候，只關注事件自己，而不關心誰訂閱了這個事件。

觀察者模式

觀察者模式定義了一種一對多的依賴關係，讓多個觀察者對象同時監聽某一個目標對象，當這個目標對象的狀態發生變化時，會通知全部觀察者對象，使它們可以自動更新。

觀察者模式咱們可能比較熟悉的場景就是響應式數據，如 Vue 的響應式、Mbox 的響應式。

觀察者模式有完成整個流程須要兩個角色：

目標
觀察者

簡單流程以下：

目標<=>觀察者，觀察者觀察目標（監聽目標）-> 目標發生變化-> 目標主動通知觀察者。

簡單的代碼實現以下：

/** * 觀察監聽一個對象成員的變化 * @param {Object} obj 觀察的對象 * @param {String} targetVariable 觀察的對象成員 * @param {Function} callback 目標變化觸發的回調 */
function observer(obj, targetVariable, callback) {
  if (!obj.data) {
    obj.data = {}
  }
  Object.defineProperty(obj, targetVariable, {
    get() {
      return this.data[targetVariable]
    },
    set(val) {
      this.data[targetVariable] = val
      // 目標主動通知觀察者
      callback && callback(val)
    },
  })
  if (obj.data[targetVariable]) {
    callback && callback(obj.data[targetVariable])
  }
}
複製代碼

可運行例子以下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,viewport-fit=cover" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <div id="dom-one"></div>
      <br />
      <div id="dom-two"></div>
      <br />
      <button id="btn">改變</button>
    </div>
    <script> /** * 觀察監聽一個對象成員的變化 * @param {Object} obj 觀察的對象 * @param {String} targetVariable 觀察的對象成員 * @param {Function} callback 目標變化觸發的回調 */ function observer(obj, targetVariable, callback) { if (!obj.data) { obj.data = {} } Object.defineProperty(obj, targetVariable, { get() { return this.data[targetVariable] }, set(val) { this.data[targetVariable] = val // 目標主動通知觀察者 callback && callback(val) }, }) if (obj.data[targetVariable]) { callback && callback(obj.data[targetVariable]) } } const obj = { data: { description: '原始值' }, } observer(obj, 'description', value => { document.querySelector('#dom-one').innerHTML = value document.querySelector('#dom-two').innerHTML = value }) btn.onclick = () => { obj.description = '改變了' } </script>
  </body>
</html>
複製代碼