iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Modern Web

打通 RxJS 任督二脈 系列

RxJS 在前端世界的能見度已經越來越高,不管是 Angular、React、Vue 甚至跳脫這些框架都能夠看到它的身影;由於 RxJS 是多個抽象觀念組合而成,因此顯得更加抽象,不少新手學會 subscribe 及一些 operators (可能還錯誤使用) 之後就因太過抽象而棄坑。
但只要能把相關的基礎打好,透過 RxJS 可以輕易寫出高度好讀、好維護的程式碼,處理複雜問題的時候也能更加得心應手,就此棄坑實在是很可惜的事情!本系列文章將分享我在工作時推坑同事 RxJS 的經驗,以及解釋背後真正所需要的基礎知識,幫助大家掌握這些基本觀念,打通 RxJS 任督二脈!

鐵人鍊成 | 共 35 篇文章 | 176 人訂閱 訂閱系列文 RSS系列文 團隊全端開發人員天梯
DAY 11

認識彈珠圖 Marble Diagram

之前的文章我們花了不少篇幅把學習 ReactiveX 前應該具備的知識都建立起來了,接下來就讓我們回歸到 ReactiveX,認識一下 ReactiveX 本身...

2020-09-26 ‧ 由 黃升煌 Mike 分享
DAY 12

RxJS 建立 Observable 的基礎 - Observable / Subject / BehaviorSubject / ReplaySubject / AsyncSubject

今天我們來介紹一下幾種最基本建立 observable 的方式。 Observable Observable 是 RxJS 中建立串流最基本的方式之一,我們可以...

2020-09-27 ‧ 由 黃升煌 Mike 分享
DAY 13

認識 Cold Observable 與 Hot Observable

昨天我們介紹了 Observable 和 Subject 系列兩種不同的建立資料流物件的方法,也稍微說明了訂閱時會發生的不同,今天讓我們用比較專有的名詞:Col...

2020-09-28 ‧ 由 黃升煌 Mike 分享
DAY 14

RxJS 建立類型 Operators (1) - EMPTY / of / range / iif / throwError / ajax

今天開始進入各種 Operators 的介紹啦!首先我們先來看看「建立類型」的 operators,除了前兩天介紹從頭開始建立 Observable 的方法外,...

2020-09-29 ‧ 由 黃升煌 Mike 分享
DAY 15

RxJS 建立類型 Operators (2) - from / fromEvent / fromEventPattern / interval / timer / defer

今天我們來介紹更多建立類型的 operators,分別是 fromXXXX 系列,和一些跟時間操作有關的 operators。 from from 算是使用機會...

2020-09-30 ‧ 由 黃升煌 Mike 分享
DAY 16

RxJS 組合/建立類型 Operators (1) - concat / merge / zip / partition

接下來我們來介紹「組合/建立類型」的 operators,這類型 operators 的目標依然是「建立」新的 observable,但來源不再是特定的數值等,...

2020-10-01 ‧ 由 黃升煌 Mike 分享
DAY 17

RxJS 組合/建立類型 Operators (2) - combineLatest / forkJoin / race

今天再來介紹幾個常用的「建立/組合」類型的 operators。 combineLatest combineLatest 跟昨天介紹過的 zip 非常像,差別在...

2020-10-02 ‧ 由 黃升煌 Mike 分享
DAY 18

RxJS 轉換類型 Operators (1) - map / scan / pairwise

在介紹完各種建立 Observable 的 operators 後,接下來我們開始介紹各式各樣放在 pipe 裡面,讓 Observable 資料流向更加多采多...

2020-10-03 ‧ 由 黃升煌 Mike 分享
DAY 19

RxJS 轉換類型 Operators (2) - switchMap / concatMap / mergeMap / exhaustMap

今天介紹幾個使用頻率非常高、功能非常類似,又有很大差別的轉換類型 operators:switchMap / concatMap / mergeMap / ex...

2020-10-04 ‧ 由 黃升煌 Mike 分享
DAY 20

RxJS 組合類型 Operators (1) - switchAll / concatAll / mergeAll / combineAll / startWith

今天要介紹的是「組合類型」的 operators,這類型的 operators 會根據指定的條件將來源 Observable 的資料進行「組合」,變成一條新的...

2020-10-05 ‧ 由 黃升煌 Mike 分享