Rxjs 響應式編程庫

2021-01-07 AI撲社

什麼是Rxjs

RxJS是使用Observables 的響應式編程的庫,它使編寫異步或基於回調的代碼更容易。隨著深入你會發現它採用了訂閱者模式,其中也帶有純函數的思想,比如Rxjs5中我們把「副作用」都寫在.do()中。直到在使用了RxJS 6之後才了解其少有人意識到的另一面——流。

什麼是流?node中的stream,gulp中的管道流... 這裡我們不用專業術語來解釋,用生活中大家熟悉的的例子來類比,比如「河流」。

河流有什麼特點?至少有兩個特點:水往低處流,河流雖然可能會蜿蜒盤旋,但是朝向固定,比如我國的長江和黃河就都是由西向東流。在RxJS中數據的流向也是固定的,就是從發送者到訂閱者。基本都如下面這種形式:

河道有無數的分支也有無數的合併,在Rxjs中的是,通過不同的操作符將數據流拆分處理聚合又拆分。RxJS 6 相對於 RxJS 5(這裡指5.5以下的版本,因為pipe函數在RxJS 5.5中作為新特性已被引入) 來說不僅修改了一部分操作符的名稱,同時做了一個較大的改動,引入了管道(pipe)。

這種寫法上的變化就帶來了用法上的變化,以前的固定「河流」可以通過「管道」(pipe)來控制形成靈活的「水流」。

Rxjs vs Promise

Rxjs 和傳統的Promise在處理異步問題上有什麼差距呢?再代碼層面什麼是Rxjs說到底是要理解什麼是Observable。RXJS是Observable的Javascript實現。

promise相較於Rxjs而言功能更單一 promise 只能將一個數據的狀態由pending轉換成resoloved或者rejected.而Rxjs可以處理多個數據對應complete和error狀態但是Rxjs同時又擁有next方法。Observable是惰性的,需要subscribe的時候才輸出值。promise內部狀態是不可控制的,執行了就無法終止。而Observable可以定義如何取消異步方法。這也就是我下面會討論到的一個異步場景。

輸入框中輸入字符,按回車發送一個請求,並將返回的結果變成一個todo item。如果在請求返回結果前又一次按下回車或add按鈕,如果相同則不進行任何操作,如果不同則取消掉上次的請求並發送新的請求。(實際的場景往往是發送個http請求該請求會返回的很慢,業務上加上心跳檢查,如果前一次在心跳間隔內無返回則再次調用請求,同時需要拋棄前一次請求的返回,並且此時有可能調用參數不一樣的該接口從而造成數據不一致的問題)對於Promise實現我們不只要維護一個定時器timer 同時還要維護一個全局變量。

而Rxjs 我們可以通過switchMap 切換 Observable達到該效果

為什麼使用 switchMap?

switchMap和其他打平操作符的主要區別是它具有取消效果。在每次發出時,會取消前一個內部 observable (你所提供函數的結果) 的訂閱,然後訂閱一個新的observable 。你可以通過短語切換成一個新的 observable來記憶它。

它能在像 typeaheads 這樣的場景下完美使用,當有新的輸入時便不再關心之前請求的響應結果。在內部observable長期存活可能會導致內存洩露的情況下,這也是一種安全的選擇,例如,如果你使用mergeMap和interval,並忘記正確處理內部訂閱。記住,switchMap 同一時間只維護一個內部訂閱,在示例1中可以清楚出看到這一點。

不過要小心,在每個請求都需要完成的情況下,考慮寫資料庫,你可能要避免使用 switchMap。如果源observable發出速度足夠快的話,switchMap可以取消請求。在這些場景中,mergeMap是正確的選擇。

這裡的switchMap其實是map and switch,而switch操作符的行為是:

如果Observable中流動的數據也是Observable,switch會將數據流中最新的一個 Observable訂閱並將它的值傳遞給下一個操作符,然後取消訂閱之前的 Observable。

簡直就是為心跳檢查量身定做。不管你異步的狀態是怎麼樣switchMap中的Observable只訂閱最新的一個。下面有個例子可以幫你很清晰的理解:

嘗試一些場景中使用Rxjs

1.寫一個基於 websocket 的在線聊天室,每次websocket收到新消息,不可能都立刻渲染出來,如果是用於生產,同時會有很多人說話wx渲染很大程度會有性能問題。用JS寫的話,你需要維護一個數組,和一個timer,收到消息,先放進數組,然後timer負責把消息渲染出來,同時還要考慮清理timer,類似:

而在Rxjs中通過操作符bufferTime 就可以減少維護timer的成本:

比如我們需要監聽頁面滾動的事件,作出一些邏輯操作,這是就會產生事件過於頻繁的調用,造成頁面卡頓的現象。用原生js實現的時候,需要實現個節流或者防抖函數,通過實現個閉包函數,在內部維護個定時器。而在Rxjs中通過操作符debounce 就可以方便的解決

相關焦點

  • Intention.js:輕量級響應式開發工具
    Intention.js是一款專門用於響應式開發的輕量級開源庫,遵循MIT許可。它通過HTML屬性操作DOM,通過修改HTML即可實現所有變更,並可用來描述不同設備之間的HTML文檔差異。Intention.js由兩部分組成:Intention.js和Context.js。
  • RxJS 入坑教程
    準備工作首先在 https://github.com/teambition/learning-rxjs clone 項目所需的 seed,本文中所有涉及到 RxJS 的代碼將全部使用 TypeScript 編寫。使用 npm start 啟動 seed 項目,這篇文章中我們將實現以下幾點功能: 1.
  • Per.js 2.5 版本發布,執行速度超快的 JS 響應式框架
    Per.js 2.5版本今天發布了,那麼讓我們來看看這次版本更新了哪些內容:修復data屬性bug修復for屬性響應式bug
  • Angular10教程--4.1 RxJs-創建類及合併類操作符
    (參考文檔:https://rxjs-cn.github.io/learn-rxjs-operators/operators/)tips:通常情況下,我們是不會通過new Observable() 形式去創建一個可觀察對象的,都是使用操作符來創建。這些運算符幾乎允許你基於任何東西來創建一個 observable 。
  • Per.js 2.6 版本發布,執行速度超快的 JS 響應式框架
    Per.js 2.6版本今天發布了,那麼讓我們來看看這次版本更新了哪些內容:dom方法增加info屬性,用來定義值,同時方法中的this指向info
  • Per.js 2.6.1 版本發布,執行速度超快的 JS 響應式框架
    Per.js 2.6.1版本今天發布了,那麼讓我們來看看這次版本更新了哪些內容:
  • Per.js 2.2 正式發布,中國速度最快的JS大型響應式框架?
    Per.js 2.2版本今天發布了,那麼讓我們來看看這次2.2版本更新了哪些內容:
  • 探索RxJS - 做一個github小應用
    本例的所有代碼在 github 倉庫:rxjs-example 首先要注意的是,目前在 github 上有兩個主流 RxJS,它們代表不同的版本: ReactiveX - rxjs RxJS 5 beta 版 Reactive-Extensions - RxJS RxJS 4.x 穩定版 這兩個版本的安裝和引用稍有不同
  • Per.js 2.3 發布,超快執行速度的 JavaScript 響應式框架
    Per.js 2.3版本今天發布了,那麼讓我們來看看這次2.2版本更新了哪些內容:除了do之外的其他方法支持無括號構造,例如Per.use(),
  • bootstrap響應式布局
    什麼是響應式 Web 設計   響應式 Web 設計是一個讓用戶通過各種尺寸的設備瀏覽網站獲得良好的視覺效果的方法。   響應式 Web 設計工作原理   為了應用響應式 Web 設計,您需要創建一個包含適應各種設備尺寸樣式的 CSS。一旦頁面在特定的設備上加載,該頁面上使用了各種字體和 Web 開發技術,比如媒體查詢(Media Queries),此時,會先檢測設備的視口大小,然後加載特定於設備的樣式。
  • RxSwift的第一印象
    RxRx是最常使用的一個響應式編程框架。它與其他RP框架的一大不同是它的跨平臺特性,同時,它有著最大的開源社區,無數的文檔以及有參考價值的問題討論,許許多多的人不斷地對其進行改進。.addDisposableTo(disposeBag)UIKit/Appkit bindings你可以很容易地通過rx_itemsWithCellIdentifier將Observable序列綁定到table view上。
  • React.js 2016最佳實踐
    2015開始湧現出一批具有更強功能和響應式解決方案的Flux庫,讓我們一起看看:  Flux‍‍  根據我們的經驗,Flux通常被過度使用了(就是大家在不需使用的場景下,還是使用了)。  Flux提供了一種清爽的方式存儲和管理應用的狀態,並在需要的時候觸發渲染。
  • 響應式頁面的布局原理、快速構建和適用範圍
    響應式頁面相信大家都不陌生了,在當今的網際網路世界幾乎隨處可見。今天從響應式分布的原理、基礎知識、和頁面創建以及注意事項等方面探討,希望大家對響應式頁面有個較為全面的把握。原理隨著顯示終端設備的多樣化,出現了各種尺寸的屏幕。
  • 用 RxJS 連接世界
    如果你有興趣,可以嘗試下面的代碼觀察 switchMap 行為:import { Observable, Observer } from 'rxjs'const stream = Observable.create((observer: Observer<number>) => {  let i = 0  const intervalId = setInterval
  • 某課網實戰教程-所向披靡的響應式開發(免費)
    第1章 前期準備介紹了課程內容、背景和案例展示、什麼是響應式網站、怎樣分析設計圖、響應式網站設計實踐原則第2章 如何組織項目目錄結構
  • 從觀察者模式到響應式的設計原理
    響應式對使用過 Vue 或 RxJS 的小夥伴來說,應該都不會陌生。響應式也是 Vue 的核心功能特性之一,因此如果要想掌握 Vue,我們就必須深刻理解響應式。接下來阿寶哥將從觀察者模式說起,然後結合 observer-util 這個庫,帶大家一起深入學習響應式的原理。
  • React.js 2016 最佳實踐
    作為一個長時間使用React.js的開發者,我已經有自己的答案和最佳實踐了,但你可能不會同意我說的所有點。我對你的想法和意見很感興趣,請留言進行討論。如果你只是剛開始接觸React.js,請閱讀React.js教程,或Pete Hunt的React howto。
  • 對比 12,000 個 Vue.js 開源項目發現最實用的 TOP45!
    2019 更是熱度不減,而作為近年來尤為熱門的前端框架,Vue.js 自是積累了大量關注。本文將為你介紹 2019 年最值得關注的 45 個 Vue.js 開源項目——Let's go!Eagle.jsStar 數:3343GitHub:https://github.com/Zulko/eagle.js介紹:使用 Vue.js 構建的幻燈片框架。
  • Per.js 3.0-Beta.1 發布,「性能秒殺 Vue 的前端怪獸級框架」
    好吧,說起來還有點小激動呢!那麼我們還是直接進入正題吧。Per.js 3.0-Beta.1 版本今天終於發布了,那麼現在就讓我們來看看這次版本更新了哪些內容:1、dom方法響應式data、method、info屬性可以使用類似app.dom.var1這種格式更改了!
  • Chart.js - 漂亮的 Javascript 圖表開源庫
    這是一個使用簡單、動效現代酷炫js圖表庫,用來構建專業美觀的數據圖表。介紹Chart.js 是一個基於 canvas 的可視化開源庫。它可以用於構建簡單漂亮的 H5 圖表,滿足產品數據可視化的需求。智能響應式,如果瀏覽器改變了大小,Chart.js 會重新調整圖表的大小,同時為這個大小提供了完美的縮放粒度;支持模塊化加載,並且每個圖表類型都已經分離,可以按需加載項目所需的圖表類型;針對滑鼠和觸摸設備上提供了對畫布工具提示的簡單支持,也支持自定義觸發事件,能滿足複雜的交互需求。