iT邦幫忙

rxjs相關文章
共有 85 則文章
鐵人賽 Modern Web
打通 RxJS 任督二脈 系列 第 35

技術 如何替 RxJS 撰寫測試 - 一般測試與彈珠圖測試方法

今天我們來聊聊如何撰寫測試程式來確保寫出來的 RxJS 如我們所想的一般運作,也就是撰寫測試程式碼!撰寫測試程式是軟體開發中非常重要的一環,雖然不是所有程式碼都...

鐵人賽 Modern Web
打通 RxJS 任督二脈 系列 第 34

技術 認識 RxJS 的 Scheduler

今天我們來認識一下 RxJS 的 Scheduler,雖然在一般使用 RxJS 開發應用程式時幾乎不會用到 Scheduler,但 Scheduler 可以說是...

鐵人賽 Modern Web
打通 RxJS 任督二脈 系列 第 33

技術 如何設計自己的 RxJS Operators

今天我們來聊點輕鬆(?)的主題 - 「如何設計出自己的 RxJS Operators」吧! 為何要自己設計 opereators RxJS 提供了超過 100...

鐵人賽 Modern Web
打通 RxJS 任督二脈 系列 第 32

技術 實戰練習 - 使用 RxJS 實作 Flux Pattern

使用 React 作為前端架構的朋友對於 Flux 應該都不陌生,React 也內建了 Flux 讓我們可以直接使用,同時也有許多其他的 library 以這個...

鐵人賽 Modern Web
打通 RxJS 任督二脈 系列 第 31

技術 實戰練習 - 使用 RxJS 實作「自動完成 / 搜尋 / 排序 / 分頁」功能

今天我們用實際的例子來練習各種 RxJS operators 的組合運用!在一般的應用程式裡面,資料查詢應該算是非常常見的情境了,我們就實際使用資料查詢的功能做...

鐵人賽 Modern Web DAY 30
打通 RxJS 任督二脈 系列 第 30

技術 RxJS Multicast 類 Operator (1) - multicast / publish / refCount / share / shareReplay

還記得之前我們介紹過 Cold Observable v.s. Hot Observable 嗎? Cold Observable 和觀察者 (Observer...

鐵人賽 Modern Web DAY 29
打通 RxJS 任督二脈 系列 第 29

技術 RxJS 錯誤處理 Operators (1) - catchError / finalize / retry / retryWhen

今天來介紹一些跟「錯誤處理」有關的 operators。在使用 RxJS 時,資料流是透過 pipe 及各式各樣的 operators 在處理,且很多時候是非同...

鐵人賽 Modern Web DAY 28
打通 RxJS 任督二脈 系列 第 28

技術 RxJS 工具類型 Operators (1) - tap / toArray / delay / delayWhen

今天要介紹的是「工具類型」的 Operators,也都不太困難,很好理解,繼續輕鬆學習吧! tap 在之前文章介紹 functional programming...

鐵人賽 Modern Web DAY 28

技術 [Day 28] 菜鳥工程師的初次開發「偽」 Open Source Project

ConsumerX 這篇文章的標題似乎跟前幾天的「菜鳥工程師的初次 Open Source Contribution」 這篇文章有點像欸!不同的是上次是去貢獻...

鐵人賽 Modern Web DAY 25
打通 RxJS 任督二脈 系列 第 25

技術 RxJS 過濾類型 Operators (5) - sampleTime / sample / auditTime / audit / debounceTime / debounce

今天分享的過濾類型 operators 都具有依照時間條件讓原來資料流不要太過頻繁發生件的意味,但各自有不同處理邏輯,有些也比較抽象,建議多看看彈珠圖來理解。...

鐵人賽 Modern Web DAY 24
打通 RxJS 任督二脈 系列 第 24

技術 RxJS 過濾類型 Operators (4) - distinct / distinctUntilChanged / distinctUntilKeyChanged

今天來分享過濾類型的 operators - distinct 系列,這系列的 operators 都是用來避免「重複的事件資料」發生,但各有不同的用處,讓我們...

鐵人賽 Modern Web DAY 23
打通 RxJS 任督二脈 系列 第 23

技術 RxJS 過濾類型 Operators (3) - skip / skipLast / skipUntil / skipWhile

昨天介紹的 take 系列是用來決定要「拿哪些資料」,今天來介紹 skip 系列,越來決定「忽略哪些資料」。 skip skip 可以傳入一個數字,當訂閱開始時...

鐵人賽 Modern Web DAY 22
打通 RxJS 任督二脈 系列 第 22

技術 RxJS 過濾類型 Operators (2) - take / takeLast / takeUntil / takeWhile

今天來介紹 take 系列的各種過濾類型 operators。 take take 代表要從來源 Observable 中觸發 N 次事件的值;當訂閱開始後,如...

鐵人賽 Modern Web DAY 19
打通 RxJS 任督二脈 系列 第 19

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

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

鐵人賽 Modern Web DAY 17
打通 RxJS 任督二脈 系列 第 17

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

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

鐵人賽 Modern Web DAY 16
打通 RxJS 任督二脈 系列 第 16

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

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

鐵人賽 Modern Web DAY 15
打通 RxJS 任督二脈 系列 第 15

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

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

鐵人賽 Modern Web DAY 14
打通 RxJS 任督二脈 系列 第 14

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

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

鐵人賽 Modern Web DAY 8
打通 RxJS 任督二脈 系列 第 8

技術 從疊代器模式認識 RxJS

前兩天的文章中我們介紹了「觀察者模式 - Observer Pattern」,今天我們來介紹另外一個在 ReactiveX 中也很重要的觀念:「疊代器模式 -...

鐵人賽 Modern Web DAY 7
打通 RxJS 任督二脈 系列 第 7

技術 隨堂測驗 - 使用 RxJS 實作影片上架通知功能

昨天的文章中我們實際撰寫 JavaScript 用「觀察者模式」完成了一個「影片上架通知」的功能,今天我們就練習看看直接使用 RxJS 來完成一樣的功能,你會發...

鐵人賽 Modern Web DAY 6
打通 RxJS 任督二脈 系列 第 6

技術 觀察者模式 Observable Pattern 認識 RxJS

今天我們來認識 ReactiveX 的重要組成之一,也就是「觀察者模式 - Observer Pattern」。有學過物件導向程式設計的朋友應該都聽過設計模式...

鐵人賽 Modern Web DAY 5
打通 RxJS 任督二脈 系列 第 5

技術 認識非同步 (Asynchronous) 及串流 (Stream)

非同步 (asynchronous) 與串流 (stream),是程式開發時經常必須面對的議題,各自有各自解決的問題,也各自都有其帶來的延伸問題,今天就先來對這...

鐵人賽 Modern Web DAY 4
打通 RxJS 任督二脈 系列 第 4

技術 隨堂測驗 - 使用 RxJS 完成簡易計數器

在昨天的文章最後我們出了一個「簡易計數器」的練習,今天就來看看該如何實作這些功能吧! 實作完成的程式範例:https://stackblitz.com/edit...

鐵人賽 Modern Web DAY 3
打通 RxJS 任督二脈 系列 第 3

技術 三步驟快速上手 RxJS

昨天我們學會了如何開始將專案加入 RxJS,今天讓我們從頭開始,認識一下基本的 RxJS 起手式吧! RxJS 超簡單三步驟 上圖示 ReactiveX 網站...

鐵人賽 Modern Web DAY 17
Angular10 實作教學 系列 第 17

技術 NG10鐵人賽 - 17 - 資料傳遞處理 - 我丟要的接

利用 subject 放置 資料,讓 接收者 取得資料 data-store.service.ts private bookSubject = new Subj...

鐵人賽 Modern Web DAY 2
打通 RxJS 任督二脈 系列 第 2

技術 開始練習 RxJS 前的環境準備

要開始練習 RxJS,當然要先準備好一個可以開始使用 RxJS 的環境,本篇文章會以完全沒接觸過 RxJS 為假設,介紹幾種起始的環境準備方式,當然對於已經有撰...

鐵人賽 Modern Web DAY 1
打通 RxJS 任督二脈 系列 第 1

技術 打通 RxJS 任督二脈

RxJS 是 ReactiveX (又稱 Reactive Extensions,簡稱 Rx) 這個概念的 JavaScript 實現版本;而 Reactive...

技術 [Angular][RxJs] 監聽特定 button click事件 fromEvent

需求: 表單Submit後需要從後端做 新增or修改, 為避免User重複觸發, 打算將Submit設計為 Observable, 可以搭配Rxjs的exhau...

技術 [Angular][RxJs][誤區筆記] Observable Unsubscribe

架構: (1) userComponent: 訂閱(subscribe)sharedService 的 User資料 (2)sharedService 利用Su...

技術 [Angular][RxJs] Scroll progress : fromEvent 應用

實作: 根據scroll的位置,在頁面上方顯示一個 progress bar 對應scroll 的位置。 Demo: https://angular-ym-sc...