【Rxjs】Rxjs_觀察者模式和發布訂閱模式

Java3y 發布于2019-08-23 14:36 / 2520人閱讀

摘要：觀察者模式屬于行為型模式，用于建立一種對象與對象之間的依賴關系，一個對象發生改變時將自動通知其他對象，其他對象將相應作出反應。

Rxjs_觀察者模式和發布訂閱模式 設計模式

撿起大學所學的《設計模式》吧 Orz

觀察者模式和發布訂閱模式特別容易被人們混淆，很多書里面也將這兩個概念混為一談，所以首先要搞清楚這兩種模式的區別。

觀察者模式

╭─────────────╮  Fire Event  ╭──────────────╮
│             │─────────────>│              │
│   Subject   │              │   Observer   │
│             │<─────────────│              │
╰─────────────╯  Subscribe   ╰──────────────╯

觀察者其模式實很好理解，模式中只有兩種角色，觀察者和被觀察者。

觀察者模式屬于行為型模式，用于建立一種對象與對象之間的依賴關系，一個對象發生改變時將自動通知其他對象，其他對象將相應作出反應。

Subject(目標) 目標又稱為主題，它是指被觀察的對象。

Observer(觀察者) 觀察者將對觀察目標的改變做出反應

代碼例子：jQuery

  function refresh() {
    $("div").empty().text("you are stupid.")
    $("div").trigger("refresh")
  }
  ...
  $("div").on("refresh", () => {
    $("span").empty().text("go to find it.")
  })

發布-訂閱模式

 ╭─────────────╮                 ╭───────────────╮   Fire Event   ╭──────────────╮
 │             │  Publish Event  │               │───────────────>│              │
 │  Publisher  │────────────────>│ Event Channel │                │  Subscriber  │
 │             │                 │               │<───────────────│              │
 ╰─────────────╯                 ╰───────────────╯    Subscribe   ╰──────────────╯

發布訂閱模式屬于廣義上的觀察者模式

發布訂閱模式與觀察者模式非常接近，僅僅只是多了一個中間層用于管理消息（信息通道），可以看成是一種優化的觀察者模式。

生活中有一個很好的例子——廣播電臺，人們會把頻道調到他們最喜歡的節目。廣播站不知道觀眾聽得是什么或者他們正在聽什么，只需要發布他們的節目就可以了。而觀眾也不知道廣播站制作節目的過程，他們只要在他們最喜歡的節目運行的時候把臺調到對應的頻道或者告知朋友就行。

觀察者模式和發布-訂閱模式的比較

兩者的比較如下圖所示：

觀察者模式

必須知道具體的 Subject，兩者可以直接聯系

緊耦合

大多數是同步的

在單個應用程序地址空間中實現

發布訂閱模式

無直接依賴關系，通過消息代理

松耦合

大多數是異步的（使用消息隊列）

交叉應用模式

參考鏈接

《對象間的聯動——觀察者模式（二） - 設計模式之行為型模式 - 極客學院 Wiki》

《設計模式：發布/訂閱模式解析 - 記錄技術的點滴 - SegmentFault 思否》

《觀察者模式和發布訂閱模式有什么不同？ - 知乎》

GPU云服務器云服務器發布訂閱模式訂閱發布模式 DTS 訂閱發布模式設計模式觀察者模式

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100859.html

從觀察者模式到迭代器模式系統講解 RxJS Observable（一）

摘要：是的縮寫，起源于，是一個基于可觀測數據流結合觀察者模式和迭代器模式的一種異步編程的應用庫。是基于觀察者模式和迭代器模式以函數式編程思維來實現的。學習之前我們需要先了解觀察者模式和迭代器模式，還要對流的概念有所認識。 RxJS 是 Reactive Extensions for JavaScript 的縮寫，起源于 Reactive Extensions，是一個基于可觀測數據流 Stre...

notebin 2019-08-23 18:02 評論0 收藏0
【CuteJavaScript】Angular6入門項目（3.編寫服務和引入RxJS）

摘要：發布通過回調方法向發布事件。觀察者一個回調函數的集合，它知道如何去監聽由提供的值。本文目錄一、項目起步二、編寫路由組件三、編寫頁面組件 1.編寫單一組件 2.模擬數據 3.編寫主從組件四、編寫服務 1.為什么需要服務 2.編寫服務五、引入RxJS 1.關于RxJS 2.引入RxJS 3.改造數據獲取方式六、改造組件 1.添...

RebeccaZhong 2019-08-23 15:25 評論0 收藏0
使用RxJS管理React應用狀態的實踐分享

摘要：隨著前端應用的復雜度越來越高，如何管理應用的數據已經是一個不可回避的問題。應用的數據不是只有狀態的，還有事件異步常量等等。出于以上兩點原因，最終決定基于來設計一套管理應用的狀態的解決方案。隨著前端應用的復雜度越來越高，如何管理應用的數據已經是一個不可回避的問題。當你面對的是業務場景復雜、需求變動頻繁、各種應用數據互相關聯依賴的大型前端應用時，你會如何去管理應用的狀態數據呢？我們認為...

KunMinX 2019-08-26 13:41 評論0 收藏0
將RxJS融入React項目

摘要：技術積累經過社區的努力學習資料還是很多的，官方中文文檔就已經很不錯，不過我們先從天精通初步感受一下然后配合一些中文文檔來補充知識點，最后再根據官方文檔來校驗整個知識體系。資料學習操作符的時候可以對照彈珠圖的交互彈珠圖的中文版中文文檔前言最近準備畢設，技術選型的時候因為功能的一些需求準備將RxJs融入到項目中，考慮RxJs的時候因為之前的技術棧還猶豫了一下，查了一些資料以及粗略瀏覽了...

frontoldman 2019-08-26 11:37 評論0 收藏0