Tags / RxJS

Tag / RxJS

RxJS - The Art of Abstraction blur coverRxJS - The Art of Abstraction cover

RxJS - The Art of Abstraction

什麼是好的抽象?好的抽象就是讓我們可以用最低的成本去表達那些相同邏輯的事物。儘管現代 JavaScript 的語法糖越來越多,但你的程式碼更好維護了嗎?學一套可以帶著走的思維吧!

Nov 01, 2019. 0 mins read

Why fetch & why not ?

今天(1/16) 在 Facebook 社團上看到網友提問為什麼要用 fetch,在我們已經有 jQuery ajax 的情況下,fetch 能取代 jQuery 的 ajax 嗎?

Jan 17, 2018. 7 mins read
RxJS - 封裝程式的藝術 blur coverRxJS - 封裝程式的藝術 cover

RxJS - 封裝程式的藝術

這幾年來 JavaScript 有越來越多的語法糖(syntax sugar)像是 async/await, generator 等等,但我們實際上在處理非同步行為時,仍然要透過各種不同的方式;這使我們必須學習越來越多的語法,但程式碼卻更加難以閱讀。本次演講將會說明 RxJS 如何使用相同的方式處理各種非同步行為,以及我們要如何運用 Functional Programming 的觀念把複雜的非同步行為封裝成簡單可讀的程式碼。

Nov 04, 2017. 0 mins read
如何「畫圖」寫測試 - RxJS Marble Test blur cover如何「畫圖」寫測試 - RxJS Marble Test cover

如何「畫圖」寫測試 - RxJS Marble Test

在日常生活中,我們常常用 「畫圖」 來協助溝通,圖像可以簡單的幫助我們清楚表達,整個思考流程與邏輯;那單元測試作為程式碼的文件,為什麼我們不乾脆用「畫圖」來撰寫單元測試呢? 本次分享會說明如何用 Marble Diagram 來撰寫 Observable 的測試,以及使用 Marble Testing 所帶來的好處。

Sep 21, 2017. 0 mins read

30 天精通 RxJS(31):如何 Debug?

Debug 一直是 RxJS 的難題,原因是當我們使用 RxJS 後,程式碼就會變得高度 **抽象化**;實際上抽象並不是什麼壞事,抽象會讓程式碼顯得簡潔、乾淨,但同時也帶來了除錯上的困難。

Mar 19, 2017. 6 mins read

30 天精通 RxJS(30):Cold & Hot Observable

Hot Observable 跟 Cold Observable 的差別,其實就是 **資料源(Data Source)** 在 Observable 內部建立還是外部建立。

Mar 17, 2017. 3 mins read

30 天精通 RxJS (29):30 天感言

30 天悄悄的就過了,這 30 篇的文章基本上已經把 RxJS 一個核心三個重點(Observable + Observer + Subject + Scheduler)以及各個 operators 幾乎也都有寫到。最開始寫這個系列的文章是希望能讓 RxJS 的學習曲線降低,所以文章的前後順序及內容都是特別規劃過的,不知道我到底是不是真的做到了。

Jan 14, 2017. 3 mins read

30 天精通 RxJS (28):Scheduler 基本觀念

不曉得讀者們還記不記得,我們在前面的文章中有提到 Scheduler 是為了解決 RxJS 衍生的最後一個問題,而我們現在就在揭曉這個謎底。

Jan 13, 2017. 7 mins read

30 天精通 RxJS (27):簡易實作 Observable(二)

前一篇文章我們已經完成了基本的 observable 以及 Observer 的簡易實作,這篇文章我們會接續上一篇的內容實作簡易的 Observable 類別,以及一個 creation operator 和一個 transform operator。

Jan 12, 2017. 11 mins read

30 天精通 RxJS (26):簡易實作 Observable(一)

因為實在太多讀者在問要如何實作 Observable,所以特別調整了本系列文章最後幾篇的內容,空出一天的位置來寫如何簡易實作 Observable。

Jan 11, 2017. 7 mins read

30 天精通 RxJS (25):Subject 總結

Subject 其實在 RxJS 中最常被誤解的一部份,因為 Subject 可以讓你用命令式的方式雖送值到一個 observable 的串流中。

Jan 10, 2017. 7 mins read

30 天精通 RxJS (24):Observable operators - multicast, refCount, publish, share

昨天我們介紹完了各種 Subject,不曉得各位讀者還記不記得在一開始講到 Subject 時,是希望能夠讓 Observable 有新訂閱時,可以共用前一個訂閱的執行而不要從頭開始

Jan 09, 2017. 6 mins read

30 天精通 RxJS (23):Subject, BehaviorSubject, ReplaySubject, AsyncSubject

昨天我們介紹了 Subject 是什麼,今天要講 Subject 一些應用方式,以及 Subject 的另外三種變形。

Jan 08, 2017. 7 mins read

30 天精通 RxJS (22):Subject 基本觀念

終於進到了 RxJS 的第二個重點 Subject,不知道讀者們有沒有發現? 我們在這篇文章之前的範例,每個 observable 都只訂閱了一次,而實際上 observable 是可以多次訂閱的。

Jan 07, 2017. 7 mins read

30 天精通 RxJS(21):深入 Observable

我們已經把絕大部分的 operators 都介紹完了,但一直沒有機會好好的解釋 Observable 的 operators 運作方式。

Jan 06, 2017. 6 mins read

30 天精通 RxJS (20):Observable Operators - window, windowToggle, groupBy

前幾天我們講完了能把 Higher Order Observable 轉成一般的 Observable 的 operators,今天我們要講能夠把一般的 Observable 轉成 Higher Order Observable 的 operators。其實前端不太有機會用到這類型的 Operators,都是在比較特殊的需求下才會看到,但還是會有遇到的時候。

Jan 05, 2017. 6 mins read

30 天精通 RxJS (19):實務範例 - 簡易 Auto Complete 實作

今天我們要做一個 RxJS 的經典範例 - 自動完成 (Auto Complete),自動完成在實務上的應用非常廣泛,幾乎隨處可見這樣的功能,只要是跟表單、搜尋相關的都會看到。 雖然是個很常見的功能,但多數的工程師都只是直接套套件來完成,很少有人會自己從頭到尾把完整的邏輯寫一次。

Jan 04, 2017. 8 mins read

30 天精通 RxJS (18):Observable Operators - switchMap, mergeMap, concatMap

今天我們要講三個非常重要的 operators,這三個 operators 在很多的 RxJS 相關的 library 的使用範例上都會看到。很多初學者在使用這些 library 時,看到這三個 operators 很可能就放棄了,但其實如果有把這個系列的文章完整看過的話,現在應該就能很好接受跟理解。

Jan 03, 2017. 10 mins read

30 天精通 RxJS (17):Observable Operators - switch, mergeAll, concatAll

今天我們要講三個 operators,這三個 operators 都是用來處理 Higher Order Observable。

Jan 02, 2017. 7 mins read

30 天精通 RxJS (16):Observable Operators - catch, retry, retryWhen, repeat

我們已經快把所有基本的轉換(Transformation)、過濾(Filter)和合并(Combination)的 operators 講完了。今天要講錯誤處理(Error Handling)的 operators,錯誤處理是非同步行為中的一大難題,尤其有多個交錯的非同步行為時,更容易凸顯錯誤處理的困難。就讓我們一起來看看在 RxJS 中能如何處理錯誤吧!

Jan 01, 2017. 10 mins read

30 天精通 RxJS (15):Observable Operators - distinct, distinctUntilChanged

新的一年馬上就要到了,各位讀者都去哪裡跨年呢? 筆者很可憐的只能一邊寫文章一邊跨年,今天就簡單看幾個 operators 讓大家好好跨年吧!

Dec 31, 2016. 6 mins read

30 天精通 RxJS (14):Observable Operator - throttle, debounce

昨天講到了在 UI 操作上很常用的 delay,今天我們接著要來講另外兩個也非常實用 operators,尤其在做效能優化時更是不可或缺的好工具!

Dec 30, 2016. 5 mins read

30 天精通 RxJS (13):Observable Operator - delay, delayWhen

在所有非同步中行為中,最麻煩的大概就是 UI 操作了,因為 UI 是直接影響使用者的感受,如果處理的不好對使用體驗會大大的扣分!

Dec 29, 2016. 4 mins read

30 天精通 RxJS (12):Observable Operator - scan, buffer

今天要繼續講兩個簡單的 transformation operators 並帶一些小範例,這兩個 operators 都是實務上很常會用到的方法。

Dec 28, 2016. 7 mins read

30 天精通 RxJS (11):實務範例 - 完整拖拉應用

有次不小心進到了優酷,發現優酷有個不錯的功能,能大大的提升用戶體驗,就讓我們一起來實作這個效果吧!

Dec 27, 2016. 11 mins read

30 天精通 RxJS (10):Observable Operator - combineLatest, withLatestFrom, zip

昨天我們最後講到了 `merge` 的用法,它的邏輯就像是 OR(||)一樣,可以把多個 observable 合併且同時處理,當其中任合一個 observable 送出元素時,我們都做相同的處理。 今天我們要講的三個 operators 則像是 AND(&&) 邏輯,它們都是在多個元素送進來時,只輸出一個新元素,但各自的行為上仍有差異,需要讀者花點時間思考,建議在頭腦清醒時閱讀本篇文章。

Dec 26, 2016. 10 mins read

30 天精通 RxJS (09):Observable Operator - skip, takeLast, last, concat, startWith, merge

今天是美好的聖誕節,先祝讀者們聖誕快樂! 為了讓大家在聖誕節好好的陪家人,所以今天的文章內容就輕鬆點,讓我們簡單介紹幾個的 operators 就好了。

Dec 25, 2016. 7 mins read

30 天精通 RxJS (08):簡易拖拉實作 - take, first, takeUntil, concatAll

如果是你會如何實作拖拉的功能?

Dec 24, 2016. 8 mins read

30 天精通 RxJS (07):Observable Operators & Marble Diagrams

Observable 的 Operators 是實務應用上最重要的部份,我們需要了解各種 Operators 的使用方式,才能輕鬆實作各種需求!

Dec 23, 2016. 8 mins read

30 天精通 RxJS (06): 建立 Observable(二)

通常我們會透過 creation operator 來建立 Observable 實例,這篇文章會講解幾個較為常用的 operator!

Dec 22, 2016. 12 mins read

30 天精通 RxJS (05): 建立 Observable(一)

Observable 是 RxJS 的核心,今天讓我們從如何建立 Observable 開始!

Dec 21, 2016. 10 mins read

30 天精通 RxJS (04):什麼是 Observable ?

整個 RxJS 的基礎就是 Observable,只要弄懂 Observable 就算是學會一半的 RxJS 了,剩下的就只是一些方法的練習跟熟悉;但到底什麼是 Observable 呢?

Dec 20, 2016. 9 mins read

30 天精通 RxJS (03):Functional Programming 通用函式

了解 Functional Programming 的通用函式,能讓我們寫出更簡潔的程式碼,也能幫助我們學習 RxJS。

Dec 19, 2016. 9 mins read

30 天精通 RxJS (02):Functional Programming 基本觀念

Functional Programming 是 Rx 最重要的觀念之一,基本上只要學會 FP 要上手 Rx 就不難了!Functional Programming 可以說是近年來的顯學,各種新的函式編程語言推出之外,其他舊有的語言也都在新版中加強對 FP 的支援!

Dec 18, 2016. 8 mins read

30 天精通 RxJS (01):認識 RxJS

RxJS 是筆者認為未來幾年內會非常紅的 Library,RxJS 提供了一套完整的非同步解決方案,讓我們在面對各種非同步行為,不管是 Event, AJAX, 還是 Animation 等,我們都可以使用相同的 API (Application Programming Interface) 做開發。

Dec 17, 2016. 11 mins read

30 天精通 RxJS (00):關於本系列文章

就如同羅輯思維羅胖老師所說的,在這資訊爆炸的時代,所有的內容生產者要思考一個新維度,那就是我們能幫讀者節省多少的時間?這系列文章的核心目標就是幫助讀者節省學習 RxJS 的時間,盡可能地以最低的成本精通 RxJS!

Dec 16, 2016. 7 mins read