每個醫師身邊都應該要有個白衣天使:RxJS

img

前言

RxJS 教學其實RxJS官方文件30 天精通 RxJS系列都是不錯的資料,這也是大部分人會推薦的教學網站,要說好用的原因與例證大概都不難說明,但是要如何說的讓人想用?這讓我愣了一陣不知如何回答,”用過都說讚“是一個難以說服想要入門的人但卻是當時我想的到的答案,所以今天想了個看圖說故事的方法先把在門外觀望的人給騙進來。

官方文件很佛心的在一開始的入門頁面就將最精華的部份給呈現出來,但是好像有些人看到這邊就放棄了。
img

過去的江湖郎中

背著一個藥箱,只要一張桌子兩張板凳就可以幫人診脈看病,整個過程一手包辦,這就是古代戲劇內常見的江湖郎中,也因為要做的事情多,所以每天可以看的病人少。
img
筆者習慣將自己比喻成醫師,我們會先幫病患(企業)做診斷(系統分析),再開抓藥(開發系統),最終解決病患的疾病(問題、需求),只是我們與醫生最大的差異就在於病患最終會妥協於醫師的意見,因為這跟他們的生命有關,但是客戶時常要我們妥協於他們的想法,既使充滿不合理的邏輯,反正出了問題都是我們的責任。

現在的醫院、診所

現代不論是到醫院或是診所看病,每個診間都會有一個護士,在醫生看診前她會先幫你量體溫、血壓,甚至詢問一些基本的問題(會不會過敏、有沒有家族病史),有效率一點的護士會事先量測下一位病患,讓醫生可以不間斷的接續診斷,當然可以服務的病患相對也比較多。
img

超級護士 (Observable)

其實護士還提供另一個優點主動告知,她會告訴醫生現在有病患需要診斷以及病患的基本狀況,而醫生只要在這個時間點去做診斷就好,RxJS 其中一個功能就是扮演這個護士,我們可以說病患的體溫、血壓是一種變數,以往我們(醫師)要自己主動量測才會知道目前的數值,甚至要定期量測才會知道這些數據是否改變,而透過護士我們除了可以得知現在的**狀態(值)外,還可知道狀態(值)的改變,所以我們可以說護士的功能是將原本單純的值包裝成一個可以被觀察的對象(Observable),而醫生則是一個希望了解病患狀態的人,所以我們也可說他是一個觀察者(Observer)**。
img

半被動

在 RxJS 設計上我們可以說這個小護士有個特點就是半被動,我們必須告訴她要做,她才會開始去做,因此我們必須請她(Observable)將”狀態發生改變時告知我們來診斷(diagnose)”這件事情 紀錄(subscribe)便條紙(subscriotion) 上,這樣她才會開始動作,當然如果我們希望她停止做這件事前只要將 便條紙(subscriotion) 給 撕下來(unsubscribe) 就可以讓她停止處理,換個角度來看這樣就不會一直耗費資源,所以說這是一種特點,而不是缺點。
img

專才小護士 (Operators)

使用 RxJS 另一個好處就是它提供了很多專才小護士,每個小護士可以幫我們處理特定的問題,她們可以針對我們原本護士(Observable)所要傳遞的內容再做進一步的處理,所以懂得善用她們才是重點,因為她們做得越多,那我們接收到的資訊就越精要。
img

範例

我們假設有一位病患因為發燒住院,因此需要持續追蹤體溫,因此我們就指派一個護士(Observable),當然我們就會每小時收到護士告知現在病患的體溫是多少。
img
但是我們發現溫度是以華氏溫度來記錄,對於習慣看攝氏溫度的我們來說會非常不習慣,一個方式是我們自己每次收到體溫值時做換算,另一個辦法就是請一個小護士(map)幫我們換算,所以原本會由護士(Observable)直接通知我們,現在變成透過小護士(map)幫我們換算後再將資料交給我們。
img
每個小時都被告知一次病患體溫其實也有點多,我們可能只需要再體溫有變化時再做診斷就可以,所以可以再請另一位小護士(distinctUntilChanged)幫忙,只要在體溫改變時通知我們就好,一天下來就只收到 14 次的通知。
img
接著當體溫為正常溫度 37 度時,其實也不需要知會我們,當有發燒時再處理即可,所以我們可以透過第三位小護士(filter)再幫我們篩選一次,最後我們只收到 10 次通知。
img

RxJS 6 增加一個 pipeable 操作符,可以將需要用到的操作符(Operators)給集中起來,從原始碼可以看到它就是使用 Array.reduce() 來逐一呼叫函式,並,並將每個函式的回傳值傳遞給下一個函式,所以 Operators 是有順序性的。
img

後記

RxJS 所提供的小護士(Operators) 還有很多種,大部分其實常用的就是那幾種,當我們遇到很複雜的處理邏輯再到官網搜尋即可。

護士長(Subject)

Observable 的限制就是通知對象只有一個觀察者,而 Subject 則是可以通知多個觀察者,所以如果 Observable 是護士的話,那 Subject 就是可以服務多個醫生的護士長,當然所有護士(Observable)做得到的事情護士長(Subject)也都做得到。
img