訂閱發(fā)布模式和觀察者模式的區(qū)別

ysl_unh 發(fā)布于2019-08-26 11:01 / 826人閱讀

摘要：或許以前認為訂閱發(fā)布模式是觀察者模式的一種別稱，但是發(fā)展至今，概念已經(jīng)有了不少區(qū)別。參考文章訂閱發(fā)布模式和觀察者模式真的不一樣

首選我們需要先了解兩者的定義和實現(xiàn)的方式，才能更好的區(qū)分兩者的不同點。

或許以前認為訂閱發(fā)布模式是觀察者模式的一種別稱，但是發(fā)展至今，概念已經(jīng)有了不少區(qū)別。

訂閱發(fā)布模式

在軟件架構中，發(fā)布-訂閱是一種消息范式，消息的發(fā)送者（稱為發(fā)布者）不會將消息直接發(fā)送給特定的接收者（稱為訂閱者）。而是將發(fā)布的消息分為不同的類別，無需了解哪些訂閱者（如果有的話）可能存在。同樣的，訂閱者可以表達對一個或多個類別的興趣，只接收感興趣的消息，無需了解哪些發(fā)布者（如果有的話）存在。

或許你用過 eventemitter、node 的 events、Backbone 的 events 等等，這些都是前端早期，比較流行的數(shù)據(jù)流通信方式，即訂閱發(fā)布模式。

從字面意思來看，我們需要首先訂閱，發(fā)布者發(fā)布消息后才會收到發(fā)布的消息。不過我們還需要一個中間者來協(xié)調，從事件角度來說，這個中間者就是事件中心，協(xié)調發(fā)布者和訂閱者直接的消息通信。

完成訂閱發(fā)布整個流程需要三個角色：

發(fā)布者

事件中心

訂閱者

以事件為例，簡單流程如下：

發(fā)布者->事件中心<=>訂閱者，訂閱者需要向事件中心訂閱指定的事件 -> 發(fā)布者向事件中心發(fā)布指定事件內容 -> 事件中心通知訂閱者 -> 訂閱者收到消息（可能是多個訂閱者），到此完成了一次訂閱發(fā)布的流程。

簡單的代碼實現(xiàn)如下：

class Event {
  constructor() {
    // 所有 eventType 監(jiān)聽器回調函數(shù)（數(shù)組）
    this.listeners = {}
  }
  /**
   * 訂閱事件
   * @param {String} eventType 事件類型
   * @param {Function} listener 訂閱后發(fā)布動作觸發(fā)的回調函數(shù)，參數(shù)為發(fā)布的數(shù)據(jù)
   */
  on(eventType, listener) {
    if (!this.listeners[eventType]) {
      this.listeners[eventType] = []
    }
    this.listeners[eventType].push(listener)
  }
  /**
   * 發(fā)布事件
   * @param {String} eventType 事件類型
   * @param {Any} data 發(fā)布的內容
   */
  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 可以理解為事件中心，提供了訂閱和發(fā)布功能。

訂閱者在訂閱事件的時候，只關注事件本身，而不關心誰會發(fā)布這個事件；發(fā)布者在發(fā)布事件的時候，只關注事件本身，而不關心誰訂閱了這個事件。

觀察者模式

觀察者模式定義了一種一對多的依賴關系，讓多個觀察者對象同時監(jiān)聽某一個目標對象，當這個目標對象的狀態(tài)發(fā)生變化時，會通知所有觀察者對象，使它們能夠自動更新。

觀察者模式我們可能比較熟悉的場景就是響應式數(shù)據(jù)，如 Vue 的響應式、Mbox 的響應式。

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

目標

觀察者

簡單流程如下：

目標<=>觀察者，觀察者觀察目標（監(jiān)聽目標）-> 目標發(fā)生變化-> 目標主動通知觀察者。

簡單的代碼實現(xiàn)如下：

/**
 * 觀察監(jiān)聽一個對象的變化
 * @param {Object} subject 觀察的目標
 * @param {Function} callback 目標變化觸發(fā)的回調
 */
function observer(subject, callback) {
  Object.defineProperty(subject, "description", {
    get() {
      return this.data.description
    },
    set(val) {
      this.data.description = val
      // 目標主動通知觀察者
      callback && callback(val)
    },
  })
}

可運行例子如下：

兩者的區(qū)別在哪？

角色角度來看，訂閱發(fā)布模式需要三種角色，發(fā)布者、事件中心和訂閱者。二觀察者模式需要兩種角色，目標和觀察者，無事件中心負責通信。

從耦合度上來看，訂閱發(fā)布模式是一個事件中心調度模式，訂閱者和發(fā)布者是沒有直接關聯(lián)的，通過事件中心進行關聯(lián)，兩者是解耦的。而觀察者模式中目標和觀察者是直接關聯(lián)的，耦合在一起（有些觀念說觀察者是解耦，解耦的是業(yè)務代碼，不是目標和觀察者本身）。

兩者的優(yōu)缺點？

優(yōu)缺點都是從前端角度來看的。

訂閱發(fā)布模式優(yōu)點

靈活

由于訂閱發(fā)布模式的發(fā)布者和訂閱者是解耦的，只要引入訂閱發(fā)布模式的事件中心，無論在何處都可以發(fā)布訂閱。同時訂閱發(fā)布者相互之間不影響。

訂閱發(fā)布模式在使用不當?shù)那闆r下，容易造成數(shù)據(jù)流混亂，所以才有了 React 提出的單項數(shù)據(jù)流思想，就是為了解決數(shù)據(jù)流混亂的問題。

訂閱發(fā)布模式缺點

容易導致代碼不好維護

靈活是有點，同時也是缺點，使用不當就會造成數(shù)據(jù)流混亂，導致代碼不好維護。

性能消耗更大

訂閱發(fā)布模式需要維護事件列隊，訂閱的事件越多，內存消耗越大。

觀察者模式優(yōu)點

響應式

目標變化就會通知觀察者，這是觀察者最大的有點，也是因為這個優(yōu)點，觀察者模式在前端才會這么出名。

觀察者模式缺點

不靈活

相比訂閱發(fā)布模式，由于目標和觀察者是耦合在一起的，所以觀察者模式需要同時引入目標和觀察者才能達到響應式的效果。而訂閱發(fā)布模式只需要引入事件中心，訂閱者和發(fā)布者可以不再一處（同一個頁面）。

參考文章

訂閱發(fā)布模式和觀察者模式真的不一樣

云服務器 GPU云服務器發(fā)布訂閱模式訂閱發(fā)布模式 DTS 訂閱發(fā)布模式 java的觀察者模式

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/106987.html

發(fā)布訂閱模式實現(xiàn)及發(fā)布訂閱者模式與觀察者模式的不同

摘要：發(fā)布訂閱者模式中，訂閱者是不知道也不關心事件是為什么觸發(fā)，是由哪一個事件觸發(fā)，只知道事件觸發(fā)時候，會告訴自己。然而，在發(fā)布訂閱模式中，發(fā)布者和訂閱者不知道對方的存在。在發(fā)布訂閱模式中，組件是松散耦合的，正好和觀察者模式相反。概念發(fā)布訂閱者模式，是javascript甚至大多數(shù)語言都有的語言模式，比較概念的解釋是，訂閱者把自己想訂閱的事件注冊到調度中心，當該事件觸發(fā)時候，發(fā)布者發(fā)布...

YanceyOfficial 2019-08-22 17:34 評論0 收藏0
發(fā)布訂閱模式實現(xiàn)及發(fā)布訂閱者模式與觀察者模式的不同

摘要：發(fā)布訂閱者模式中，訂閱者是不知道也不關心事件是為什么觸發(fā)，是由哪一個事件觸發(fā)，只知道事件觸發(fā)時候，會告訴自己。然而，在發(fā)布訂閱模式中，發(fā)布者和訂閱者不知道對方的存在。在發(fā)布訂閱模式中，組件是松散耦合的，正好和觀察者模式相反。概念發(fā)布訂閱者模式，是javascript甚至大多數(shù)語言都有的語言模式，比較概念的解釋是，訂閱者把自己想訂閱的事件注冊到調度中心，當該事件觸發(fā)時候，發(fā)布者發(fā)布...

Jensen 2019-08-02 10:32 評論0 收藏0
觀察者模式和發(fā)布訂閱模式（JS）

摘要：最近被人問到設計模式，觀察者模式和發(fā)布訂閱模式二者有什么區(qū)別。觀察者模式觀察者模式，目標和觀察者是基類，目標提供維護觀察者的一系列方法，觀察者提供更新接口。最近被人問到設計模式，觀察者（Observer）模式和發(fā)布（Publish）/訂閱（Subscribe）模式二者有什么區(qū)別。其實這兩種模式還是有些許差異的，本質上的區(qū)別是調度的方式不同。觀察者模式觀察者模式，目標和觀察者是基類...

Sanchi 2019-08-23 12:59 評論0 收藏0
Observer和Mediator模式的區(qū)別

摘要：舉個例子淘寶商鋪賣家在淘寶上開了一個相機店最近都有意愿去買但是覺得價格稍貴，因此暫時不打算入手，想等價格稍微便宜一點后再入手，所以這個人通過淘寶先關注賣家的相機店。等到賣家的相機打折后，淘寶會向這個人推送打折消息。 Observer觀察者模式 Observer觀察者模式和Pub/sub模式事實上都是同一套路。這種模式建立起了不同對象之間的依賴關系： showImg(https://se...

wapeyang 2019-08-20 15:59 評論0 收藏0
觀察者模式

摘要：細思不恐主旨在設計模式中，觀察者模式的主旨則是定義對象間的一種一對多的依賴關系，當一個對象的狀態(tài)發(fā)生改變時，所有依賴于它的對象都得到通知并被自動更新。簡單說兩句觀察者模式，是對象行為型模式中的一種，有的時候人們也叫他發(fā)布/訂閱模式。當我們需要在一個對象狀態(tài)改變的時候通知到其它對象，這時候就可以考慮一下觀察者模式。細思不恐 showImg(https://segmentfault....

魏憲會 2019-08-15 14:51 評論0 收藏0