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

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

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

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

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

訂閱發(fā)布模式

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

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

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

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

發(fā)布者

事件中心

訂閱者

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

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

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

class Event {
  constructor() {
    // 所有 eventType 監(jiān)聽器回調(diào)函數(shù)（數(shù)組）
    this.listeners = {}
  }
  /**
   * 訂閱事件
   * @param {String} eventType 事件類型
   * @param {Function} listener 訂閱后發(fā)布動作觸發(fā)的回調(diào)函數(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ā)布的內(nèi)容
   */
  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ā)布功能。

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

觀察者模式

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

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

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

目標(biāo)

觀察者

簡單流程如下：

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

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

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

可運(yùn)行例子如下：

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

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

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

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

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

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

靈活

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

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

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

容易導(dǎo)致代碼不好維護(hù)

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

性能消耗更大

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

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

響應(yīng)式

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

觀察者模式缺點

不靈活

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

參考文章

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/106987.html

發(fā)表評論

登陸后可評論

0條評論

ysl_unh

男|高級講師

我要關(guān)注我要私信

TA的文章

[CSS]《CSS揭秘》第三章——形狀

閱讀 1952·2019-08-30 15:53
對vertical-align的理解

閱讀 3286·2019-08-30 15:44
半小時擼一個抽獎程序

閱讀 2870·2019-08-26 13:31
vue表格組件

閱讀 2029·2019-08-26 12:10
訂閱發(fā)布模式和觀察者模式的區(qū)別

閱讀 875·2019-08-26 11:01
windows下mongoDB的環(huán)境配置

閱讀 2198·2019-08-23 15:32
Understand .sync in Vue

閱讀 1673·2019-08-23 13:43
頂級測試框架Jest指南：跑通一個完美的程序，就是教出一群像樣的學(xué)生

閱讀 2614·2019-08-23 11:58

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

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

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

觀察者模式和發(fā)布訂閱模式（JS）

Observer和Mediator模式的區(qū)別

觀察者模式

發(fā)表評論

0條評論

ysl_unh

男|高級講師

TA的文章

[CSS]《CSS揭秘》第三章——形狀

對vertical-align的理解

半小時擼一個抽獎程序

vue表格組件