深入淺出RxJS

軟體開發中有什麼老問題？

技術發展迅速，用戶的需求增加更快，軟體的代碼庫也會隨需求增長快速膨脹，在這種情況下，如何保證代碼質量？如何控制代碼的複雜度？如何維持代碼的可維護性？就成了軟體開發的大問題。業界的同仁們為了解決這些老問題做了各種努力，函式式編程和回響式編程就是在實踐中被證明行之有效的兩種方法。

RxJS兼具函式式和回響式兩種編程方式的特點，RxJS擅長處理異步操作，因為它對數據採用“推”的處理方式，當一個數據產生的時候，被推送給對應的處理函式，這個處理函式不用關心數據是同步產生的還是異步產生的，這樣就把開發者從命令式異步處理的枷鎖中解放了出來。

基本介紹

• 書名：深入淺出RxJS
• 作者：程墨
• ISBN：則9787111596646
• 頁數：397
• 定價：89.00元
• 出版社：機械工業出版社
• 出版時間：2018年5月
• 裝幀：平裝
• 開本：16

內容簡介

本書系統講解RxJS回響式編程的技術原理與套用。第1章剖析函式回響式編程的基本概念，通過簡單RxJS代碼引入函式回響式編程，並與傳統編程方式對比，解釋這種編程範式的優勢，以及這種範式形成的歷史。第2章介紹學習RxJS必須掌握的基本概念，包括數據流、操作符和觀察者模式。第3~9章介紹RxJS的各種操作符，以及如何選擇恰當的操作符來完成不同的任務。第10章介紹RxJS如何實現多播的方式。第11章介紹實現調度Scheduler的作用、原理與使用。第12章介紹如何調試和測試RxJS相關代碼，寫出高可測試性代碼。第13章介紹如何在React套用中使用RxJS，提高代碼質量。第14章介紹Redux與RxJS的組合套用，發揮兩者的共同優勢。第15章介紹一個綜合案例，用RxJS實現網頁遊戲Breakout，並剖析RxJS如何實現動畫和繪圖。

隨著網際網路行業的飛速發展，Web開發者面臨的挑戰也越來越大，伴隨著功能的增多，Web套用的複雜度也快速膨脹。對於Web套用，複雜的問題就是異步操作的處理， 無論用戶操作、AJAX請求、動畫、WebSocket推送都涉及到異步操作，傳統的異步處理方法越來越不適應複雜套用的需要，RxJS的產生，就是為了解決日益複雜的前端異步處理問題。RxJS是一門進入門檻比較高的技術，本書的目的就是降低學習成本，由淺入深地介紹RxJS，逐步解析這門技術的各個方面，讓讀者能夠以一個平緩的學習曲線來掌握這一潛力無限的技術。
主要內容包括：
· 函式回響式編程
· 數據流的工作原理
· RxJS操作符的創建方法
· RxJS所有操作符的詳細分類介紹
· 多播的套用
· Scheduler的套用
· RxJS的調試和測試方法
· React、Redux和RxJS的組合使用方法
· RxJS開發遊戲的實踐

作者簡介

程墨，資深架構師，曾任職於摩托羅拉、雅虎和微軟，雲鳥配送平台聯合創始人，服務於美國視頻服務公司Hulu。

專家推薦

網際網路Web技術發展很快，同時也就要求開發者能夠快速掌握新興的技術，如果有淺顯易懂的書來指導，就會事半功倍。這本《深入淺出RxJS》就是這樣淺顯易懂的一本書，讀者從這門書中可以獲得對RxJS的全面認識，更能了解回響式編程的巨大潛力。

——諸葛越，Hulu公司全球研發副總裁，中國研發中心總經理

目錄

前言

第1章　函式回響式編程1

1.1　一個簡單的RxJS例子1

1.2　函式式編程5

1.2.1　什麼是函式式編程5

1.2.2　為什麼函式式編程最近才崛起11

1.2.3　函式式編程和面向對象編程的比較13

1.3　回響式編程14

1.4　Reactive Extension15

1.5　RxJS是否是函式回響式編程16

1.6　函式回響式編程的優勢17

1.7　本章小結18

第2章　RxJS入門19

2.1　RxJS的版本和運行環境19

2.2　Observable和Observer24

2.2.1　觀察者模式24

2.2.2　疊代器模式25

2.2.3　創造Observable26

2.2.4　跨越時間的Observable28

2.2.5　永無止境的Observable29

2.2.6　Observable的完結30

2.2.7　Observable的出錯處理31

2.2.8　Observer的簡單形式32

2.3　退訂Observable33

2.4　Hot Observable和Cold Observable35

2.5　操作符簡介37

2.6　彈珠圖39

2.7　本章小結41

第3章　操作符基礎42

3.1　為什麼要有操作符42

3.2　操作符的分類44

3.2.1　功能分類45

3.2.2　靜態和實例分類46

3.3　如何實現操作符49

3.3.1　操作符函式的實現49

3.3.2　關聯Observable53

3.3.3　改進的操作符定義55

3.3.4　lettable/pipeable 操作符60

3.4　本章小結68

第4章　創建數據流69

4.1　創建類操作符70

4.2　創建同步數據流70

4.2.1　create：毫無神奇之處71

4.2.2　of：列舉數據71

4.2.3　range：指定範圍73

4.2.4　generate：循環創建74

4.2.5　repeat：重複數據的數據流75

4.2.6　三個極簡的操作符：empty、never和throw78

4.3　創建異步數據的Observable對象80

4.3.1　interval和timer：定時產生數據80

4.3.2　from:可把一切轉化為Observable82

4.3.3　fromPromise：異步處理的交接84

4.3.4　fromEvent85

4.3.5　fromEventPattern87

4.3.6　ajax88

4.3.7　repeatWhen89

4.3.8　defer91

4.4　本章小結92

第5章　合併數據流93

5.1　合併類操作符94

5.1.1　concat：首尾相連94

5.1.2　merge：先到先得快速通過96

5.1.3　zip:拉鏈式組合99

5.1.4　combineLatest：合併最後一個數據102

5.1.5　withLatestFrom109

5.1.6　解決glitch112

5.1.7　race：勝者通吃115

5.1.8　startWith115

5.1.9　forkJoin117

5.2　高階Observable118

5.2.1　高階Observable的意義119

5.2.2　操作高階Observable的合併類操作符120

5.2.3　進化的高階Observable處理124

5.3　本章小結128

第6章　輔助類操作符129

6.1　數學類操作符129

6.1.1　count：統計數據個數130

6.1.2　max和min：最大最小值130

6.1.3　reduce：規約統計131

6.2　條件布爾類操作符133

6.2.1　every134

6.2.2　find和findIndex135

6.2.3　isEmpty137

6.2.4　defaultIfEmpty138

6.3　本章小結138

第7章　過濾數據流139

7.1　過濾類操作符的模式140

7.1.1　filter141

7.1.2　first142

7.1.3　last144

7.1.4　take一族操作符145

7.1.5　計時的點擊計數網頁程式150

7.1.6　skip151

7.1.7　skipWhile和skipUntil151

7.2　回壓控制152

7.2.1　throttle和debounce154

7.2.2　auditTime和audit164

7.2.3　sampleTime和sample166

7.2.4　根據數據序列做回壓控制168

7.3　其他過濾方式171

7.3.1　ignoreElements172

7.3.2　elementAt172

7.3.3　single173

7.4　本章小結173

第8章　轉化數據流174

8.1　轉化類操作符174

8.2　映射數據175

8.2.1　map176

8.2.2　mapTo177

8.2.3　pluck178

8.3　快取視窗：無損回壓控制179

8.3.1　windowTime和bufferTime180

8.3.2　windowCount和bufferCount183

8.3.3　windowWhen和bufferWhen184

8.3.4　windowToggle和buffer-Toggle185

8.3.5　window和buffer186

8.4　高階的map188

8.4.1　concatMap189

8.4.2　mergeMap192

8.4.3　switchMap193

8.4.4　exhaustMap195

8.4.5　高階的MapTo195

8.4.6　expand196

8.5　數據分組196

8.6　累計數據200

8.6.1　scan200

8.6.2　mergeScan201

8.7　本章小結203

第9章　異常錯誤處理204

9.1　異常處理不可避免204

9.2　異常處理的難點206

9.2.1　try/catch只支持同步運算207

9.2.2　回調函式的局限207

9.2.3　Promise的異常處理209

9.3　RxJS的異常處理212

9.3.1　catch214

9.3.2　retry216

9.3.3　retryWhen217

9.3.4　finally220

9.4　重試的本質221

9.5　本章小結223

第10章　多播225

10.1　數據流的多播225

10.2　Hot和Cold數據流差異228

10.3　Subject230

10.3.1　兩面神Subject230

10.3.2　用Subject實現多播233

10.3.3　makeHot 操作符234

10.3.4　Subject不能重複使用235

10.3.5　Subject可以有多個上游237

10.3.6　Subject的錯誤處理239

10.4　支持多播的操作符241

10.4.1　multicast241

10.4.2　publish253

10.4.3　share255

10.5　高級多播功能257

10.5.1　publishLast和Async-Subject258

10.5.2　pubishReplay和Replay-Subject259

10.5.3　publishBehavior和BehaviorSubject262

10.6　本章小結263

第11章　掌握時間的Scheduler265

11.1　Scheduler的調度作用265

11.2　RxJS提供的Scheduler268

11.3　Scheduler的工作原理269

11.3.1　單執行緒的JavaScript270

11.3.2　調用棧和事件循環272

11.3.3　Scheduler如何工作275

11.4　支持Scheduler的操作符279

11.4.1　創造類和合併類操作符279

11.4.2　observeOn281

11.4.3　subscribeOn282

11.5　本章小結283

第12章　RxJS的調試和測試284

12.1　調試方法284

12.1.1　無用武之地的Debugger285

12.1.2　利用日誌來調試286

12.1.3　利用do來插入調試代碼287

12.1.4　改進的日誌調試方法290

12.1.5　數據流依賴圖291

12.1.6　彈珠圖292

12.2　單元測試293

12.2.1　單元測試的作用294

12.2.2　RxJS天生適合單元測試297

12.2.3　單元測試的結構298

12.2.4　RxJS單元測試中的時間303

12.2.5　操縱時間的TestScheduler306

12.2.6　可測試性代碼325

12.3　本章小結340

第13章　用RxJS驅動React341

13.1　React簡介341

13.1.1　為什麼選擇React341

13.1.2　React如何工作343

13.2　簡單的React套用Counter350

13.3　利用RxJS管理React狀態356

13.3.1　利用Subject作為橋樑356

13.3.2　用高階組件連線RxJS359

13.4　本章小結365

第14章　Redux和RxJS結合366

14.1　Redux簡介366

14.1.1　Redux的工作方式367

14.1.2　構建Redux套用368

14.2　用RxJS實現Redux372

14.3　Redux和RxJS比較374

14.4　Redux-Observable：Redux和RxJS的結合375

14.5　本章小結380

第15章　RxJS遊戲開發381

15.1　breakout的歷史381

15.2　程式設計383

15.3　用RxJS實現breakout385

15.4　本章小結397

結語398

前言

這是一個信息技術爆炸的時代，計算機程式語言和框架層出不窮，同時，編程的風格也在發生變化。也許你還沒有注意到，但是變化的確在發生。曾經面向對象式編程方法一統天下，如今越來越多開發者開始轉向函式式編程方法；與此同時，一直具有統治地位的指令式編程方法，也發現自己要面對一個新的對手：回響式編程。在這本書里，我們介紹的就是兼具函式式和回響式兩種先進編程風格的框架RxJS。

RxJS是Reactive Extension這種模式的JavaScript語言實現，通過學習了解RxJS，你將打開一扇通往全新編程風格的大門。

當然，我們學習RxJS，並不是因為RxJS是一項炫酷的技術，也不是因為RxJS是一個最新的技術。在技術的道路上，如果只是追逐“炫酷”和“最新”，肯定是要吃苦頭的，因為這是捨本逐末。

我們學習和套用RxJS，是因為RxJS的的確確能夠幫助我們解決問題，而且這些問題長期以來一直在困擾我們，沒有好的解決辦法，這些問題包括：

如何控制大量代碼的複雜度；

如何保持代碼可讀；

如何處理異步操作。

RxJS的價值在於提供了一種不一樣的編程方式，能夠解決很多困擾我們開發者的問題。

打開了這本書的讀者，你們想必也曾經面對過軟體開發過程中的這些挑戰，學習RxJS能夠幫助大家在“軍火庫”中增加一種有力武器，也許你不用隨時隨地使用這種武器，但是，你肯定多了一種解決這些問題的更有效方法。

不過，可能你也早有耳聞，RxJS的學習曲線非常陡峭，可以說已經陡峭到了不能稱為學習曲線的程度，應該稱為“學習懸崖”。這並不誇張，我個人學習RxJS就嘗試了三次。

第一次學習RxJS時，感覺這種思想很酷，但是很快就發現太多概念都是交叉出現的，文檔中為了解釋一個概念，就會引入一個新的概念，當我去了解這個新的概念的時候，發現為了解釋這個新的概念又需要理解其他的概念，整個RxJS的知識圖就像是一個迷宮，我第一次學習RxJS的經歷就終結在這個迷宮之中。

幾個月後，我第二次鼓起勇氣來學習RxJS，因為有了第一次的一些基礎，這一次還比較順利，我把概念都掌握得差不多了，但是接下來面對的就是RxJS中大量的操作符，RxJS的套用幾乎就是在選擇用哪種操作符合適。雖然我把RxJS的迷宮整個都摸了一遍，但是很多操作符我也沒有發現實際的套用場景，所以這一次學習最後依然不了了之。

最後，終於有個機會，我需要用RxJS來解決實際的問題。這一次，因為存在實際套用的驅動，我不得不深入去理解RxJS的內在機制，揣摩一個操作符為什麼要設計成這樣而不是另一個樣子，把自己擺在RxJS的角度來思考問題。我還是很幸運，這一次，終於對RxJS有了一個全面的認識。

我終於體會到RxJS的獨特之處，我很興奮，希望這個工具能夠被更多人了解，於是我向朋友們介紹RxJS，有的朋友的確花了時間去學習，但是，他們大多數最後依然放棄了。

怎么會這樣？簡單來說，是因為RxJS的學習曲線太陡峭。

上圖就是對RxJS學習曲線的形象描述，一般知識的學習曲線像是一個小山坡，而RxJS的學習曲線就像是一個懸崖，而且這個懸崖有的部分的傾斜角度超過了90度！

怎么會這樣？這個問題我也思考了很久，回顧自己三次學習RxJS的過程，我發現了問題的所在，那就是，幾乎沒有一個像樣的用線性方法教授RxJS的教材。

RxJS是開源軟體，這個軟體經過了很長時間的演進，代碼的確可圈可點，但是其文檔實在算不上優秀。RxJS的官方文檔內容雖然不少，但是內容太多，很多部分之間相互引用，並沒有一步一步告訴初學者該如何入門，初學者很容易（就像我第一次學習RxJS一樣）發現自己陷入一個巨大的、沒有頭緒的迷宮之中。

於是我想，既然RxJS是一個好東西，那為什麼不用一種簡單易懂的方式來介紹這種技術呢？這也正是寫作本書的動因。

在這本書里，我會儘量用一種線性的方法來介紹RxJS的各個方面，讀者按照正常的、從前到後的順序來閱讀，不需要在各個知識點之間跳來跳去，這樣，當讀者看到最後一頁的時候，應該就能夠對RxJS有全面深刻的認識了。

讀者可能會想，RxJS這樣一個複雜難懂的東西，我有必要去學嗎？如果你只是滿足於現狀，那真的不用去學，不過，我前面也說過，當今世界的變化和發展非常快，函式式編程也許還不起眼，但是在未來可能會占統治地位，也可能發生在明晚。你肯定不希望當變化發生的時候自己手足無措，所以，花一些時間來接觸這個面向未來的思想，對你絕對沒有壞處。

坦白地說，我並不相信每個讀者學習RxJS的經歷都會一帆風順，如果你真的能夠一次就學透RxJS，那你真的很可能是一個天才，記得一定要給我留言；如果你在學習中遇到一些挫折，請相信，你並不孤單，這本書的作者就經歷了三次學習才真正學會RxJS，任何疑問都可以留言和我交流。

讓我們開始這段旅程吧！

本書的內容

本書以線性方式來介紹RxJS，所以建議讀者以順序的方式來閱讀本書，如果讀者覺得對某一個方面已經十分了解，也可以跳過相關章節，不過，還是希望讀者在時間允許的情況下閱讀全部內容，你肯定會有新的體會。本書包含15章，章節的內容如下分布。

第1章　函式回響式編程。這一章用一些例子展示RxJS體現的編程風格，引出兩個重要的概念：函式式編程和回響式編程，使用RxJS的開發者必須先理解這兩種風格。

第2章　RxJS入門。這一章介紹軟體項目中導入RxJS的方法，RxJS中的基本概念，包括數據流、操作符和觀察者模式。

第3章　操作符基礎。使用RxJS很大程度上就是在使用操作符，這一章會介紹RxJS中操作符的實現原理。

第4章　創建數據流。這一章介紹RxJS中創建數據流的不同方法，包括RxJS提供的主要創建類操作符的使用方法。

第5章　合併數據流。這一章介紹如何合併多個數據流，包括合併類操作符的使用方法詳解。

第6章　輔助類操作符。這一章介紹不是很起眼卻很重要的兩類操作符，數學類和布爾條件類操作符。

第7章　過濾數據流。這一章介紹如何讓流過數據管道的數據根據規則篩選掉一部分，在這一章還會介紹用篩選法進行回壓控制的方法。

第8章　轉化數據流。這一章介紹對流經數據管道的數據進行格式轉化的方法，包括RxJS提供的各種轉化類操作符的用法。

第9章　異常錯誤處理。這一章介紹數據流中產生的異常的處理方法，包括如何捕獲異常和實現重試。

第10章　多播。這一章介紹如何讓一個數據源的內容被多個觀察者接收，包括Subject的使用方法和RxJS對各種多播場景的支持。

第11章　掌握時間的Scheduler。這一章介紹RxJS中Scheduler的概念。

第12章　RxJS的調試和測試。介紹RxJS套用的調試和單元測試方法，深入介紹如何利用RxJS寫出高可測試性的代碼。

第13章　用RxJS驅動React。這一章介紹RxJS和React結合的方法。

第14章　Redux和RxJS結合。這一章介紹Redux和RxJS的組合方式，包括如何用RxJS實現Redux的功能，如何用Redux-Observable來發揮兩者的共同的優勢。

第15章　RxJS遊戲開發。這一章介紹用RxJS實現一款遊戲breakout的完整過程，綜合了全書介紹的所有RxJS知識點。

本書的目標讀者

本書適合於所有網頁套用的前端開發者，如果你在日常工作中還在使用jQuery這樣的命令式編程風格的工具，那么接觸RxJS絕對會開闊你的視野；也許你已經接觸過React、Redux、Vue或者Angular這樣體現函式式編程思想的工具，那么閱讀本書可以讓你更上一層樓。

閱讀本書只需要了解基本的JavaScript知識，可以說，只要掌握JavaScript，願意接受函式回響式編程這種思維方式，再加上一點耐心，你就肯定能從閱讀本書中獲益。

原始碼

本書中包含大量的代碼示例，所有代碼都配備了儘量詳細的解釋，建議讀者要閱讀所有原始碼部分，因為，無論如何開發軟體，最後思想都是要落實到代碼中。

RxJS本身的原始碼是用TypeScript編寫的，重度使用RxJS的Angular前端框架也使用TypeScript，但是，本書並沒介紹TypeScript語言，介紹這個語言就足夠再寫一本書了。RxJS的學習曲線已經很陡了，這本書不希望再給讀者增加一項學習負擔。更重要的是，使用RxJS並不是必須使用TypeScript，完全可以使用純JavaScript來套用RxJS的一切功能。如果開發者想要對代碼增加類型檢查，可以使用TypeScript，也可以使用JavaScript配合Flow，這些都可以自由選擇，不過，類型檢查不是本書討論的範圍，所以，本書中的所有原始碼都是純JavaScript形式的。

讀者可以在本書配套的GitHub原始碼庫中找到所有的相關代碼，代碼按照章的內容組織，比如，想要查看第15章介紹的breakout遊戲，對應原始碼可以在chapter-15/breakout目錄下找到。

除了網頁套用之外，大部分示例代碼可以直接在命令行通過Node.js運行環境查看結果，建議使用npx和babel-node指令執行，下面是一個執行命令示例。

npx babel-node chapter-01/declarative/addOne.js

如果讀者發現代碼或者書中的錯誤，可以直接在本書的GitHub項目中提交問題，請不吝斧正。