Tags / Observable

Tag / Observable

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

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

Mar 17th, 2017. 2 mins read

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

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

Jan 13th, 2017. 3 mins read

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

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

Jan 12th, 2017. 5 mins read

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

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

Jan 11th, 2017. 4 mins read

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

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

Jan 10th, 2017. 3 mins read

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

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

Jan 9th, 2017. 4 mins read

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

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

Jan 8th, 2017. 3 mins read

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

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

Jan 7th, 2017. 4 mins read

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

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

Jan 6th, 2017. 2 mins read

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

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

Jan 5th, 2017. 3 mins read

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

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

Jan 4th, 2017. 3 mins read

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

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

Jan 3rd, 2017. 5 mins read

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

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

Jan 2nd, 2017. 3 mins read

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

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

Jan 1st, 2017. 6 mins read

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

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

Dec 31st, 2016. 3 mins read

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

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

Dec 30th, 2016. 2 mins read

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

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

Dec 29th, 2016. 3 mins read

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

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

Dec 28th, 2016. 4 mins read

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

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

Dec 27th, 2016. 5 mins read

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

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

Dec 26th, 2016. 5 mins read

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

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

Dec 25th, 2016. 4 mins read

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

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

Dec 24th, 2016. 5 mins read

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

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

Dec 23rd, 2016. 4 mins read

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

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

Dec 22nd, 2016. 7 mins read

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

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

Dec 21st, 2016. 5 mins read

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

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

Dec 20th, 2016. 4 mins read

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

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

Dec 17th, 2016. 4 mins read

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

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

Dec 16th, 2016. 3 mins read