Flux 架構 (Flux architecture)

Flux 是一套架構模型，將Web 應用的各個主要功能以組件的形式進行劃分，並進一步劃分子組件。而各組件又以動作、存儲器和視圖來進行架構分層。整體採用單向數據流的形式進行事件的響應，各組件間也強制按照單向數據流進行相互影響，直至數據流結束。在本書中，先向大家介紹了Flux 是什麽，以及簡單展示了其基本構建模式。然後從動作、存儲器、視圖、分發器等核心概念，更為詳細地闡述了Flux的架構模式。最後，介紹了Flux 庫、測試工具和其對其他相關技術棧的影響。本書適用於前端開發者，以及希望對Flux 架構有深入瞭解的人群。

Adam Boduch從事大規模JavaScript開發已經將近10年。在轉行前端之前，他曾使用Python和Linux編寫過幾個大規模的雲計算產品。Adam對複雜度有一些了解，在真實世界的軟件系統和應對其擴展上的挑戰方面具有實際經驗。
他寫過幾本JavaScript的書，包括《JavaScript並發》（JavaScript Concurrency），他在研究用戶體驗創新和高性能方面充滿熱情。

本書由段金辰、馬雪琴、李勝、馬飛、孫輝翻譯。
段金辰從事軟件開發大約10年，曾供職於微軟、阿里巴巴等世界知名公司，參與或主持過多項大型軟件系統的架構和開發，涉及基礎類庫、雲、Web前端、On-premises服務、App等眾多方向，精通包括JavaScript在內的多種編程語言。
馬雪琴，研究生就讀於華中科技大學通信工程專業，其間有幸接觸到前端、數據可視化等方向，並且對這些技術感到相見恨晚。現就職於阿里巴巴集團客戶體驗事業群前端開發團隊。平時喜歡宅著看書，學著畫畫，更喜歡去外面走走看看，安靜而不安分。
李勝，前端開發工程師。就職於阿里巴巴集團客戶體驗事業群前端開發團隊，曾在餓了麼大前端部門參與實習，熱衷於追尋前沿技術。除前端相關技術以外，對遊戲開發，Go以及其他後端技術也有一定了解。平時的愛好有動漫和科幻。
馬飛，阿里巴巴前端工程師，半路出家進入了互聯網行業，熱衷於Web技術，同時對工業控制，ARM嵌入式開發有一定的研究，喜歡旅行、電子遊戲、運動以及攝影。其微博為@最亞倫。
孫輝，現為阿里巴巴的一隻“前端攻城獅”，有多年的物聯網及Web前端開發經驗。愛美食、愛攝影，熱愛一切富有創造性的事物。

前言

1Flux是什麼1
Flux是一套模式1
數據入口1
狀態管理2
保持同步更新3
信息架構4
Flux並不是一個框架4
Flux的設計思路問題解決方案5
數據流向5
可回溯性7
通知的一致性8
簡捷的架構分層9
低耦合渲染9
Flux組件10
動作10
分發器11
存儲器12
視圖12
安裝Flux軟件包14
小結16

2Flux的原則17
MV*所面臨的挑戰17
關注點分離18
級聯更新19
模型更新的職責20
單向數據21
從開始到結束22
無毒無害23
顯式優於隱式23
暗藏隱患的更新24
集中修改狀態的地方26
太多動作？26
分層優於嵌套27
多組件嵌套27
嵌套深度與副作用28
數據流和分層28
應用數據和界面狀態29
兩個相同的東西29
強耦合轉換30
功能中心化31
小結31

3搭建骨架架構32
總體組織32
目錄結構33
依賴管理33
信息設計34
用戶不需要了解模型34
存儲器映射用戶看到的內容35
和哪些東西協同工作36
在動作中註入存儲器36
獲取API數據36
改變API資源狀態42
本地動作47
存儲器和功能域50
梳理頂層功能50
無關緊要的API數據51
構造存儲器數據53
模擬視圖53
找尋失去的數據53
定位動作54
端到端場景56
動作清單56
存儲器清單56
視圖清單57
小結57

4創建動作58
動作的名稱和常量58
動作命名約定58
靜態動作數據59
組織動作常量62
特性動作生成器63
什麼時候需要模塊化63
模塊化架構64
模擬數據65
模擬已存在的接口65
模擬新接口66
替換動作生成器70
狀態動作生成器71
整合其他系統72
websocket連接73
參數化動作生成器76
刪除多餘 動作76
保持動作的通用性77
創建衍生動作80
小結81

5異步動作83
保持Flux同步83
為什麼要同步83
壓縮異步行為84
異步動作語義85
創建API調用87
API是常見的情況87
API調用和用戶交互88
結合API調用92
複雜的動作生成器93
組合動作生成器96
返回promise 97
不含promise的同步98
組織異步行為99
錯誤處理101
小結103

6改變Flux存儲器的狀態105
適應不斷變化的信息105
變化的API數據105
變化的功能106
受影響的組件107
減少重複的存儲器數據107
通用存儲器數據107
註冊通用存儲器108
結合通用和專用數據112
處理存儲器的依賴關係116
等待存儲器116
數據依賴118
UI依賴119
視圖的更新順序125
存儲器的註冊順序125
視圖渲染的優先級排序125
處理存儲器複雜度126
存儲器太多126
反思功能域126
小結127

7視圖信息128
傳遞視圖數據128
change事件中的數據128
視圖決定何時渲染132
保持視圖無狀態135
UI狀態屬於存儲器135
不用查詢 DOM 135
視圖的職責136
渲染存儲器數據136
子視圖結構137
用戶交互138
在Flux中使用ReactJS 138
設置視圖狀態139
組成視圖143
響應事件146
路由和動作149
小結154

8信息的生命週期155
組件生命週期難題155
回收不再使用的資源156
隱藏依賴157
內存洩漏157
Flux結構是靜態的158
單例模式158
與模型進行比較161
靜態視圖161
擴展信息165
如何很好地擴展165
昀小化所需信息169
擴展的動作169
閒置的存儲器170
刪除存儲器數據170
優化閒置的存儲器173
保持存儲器數據174
小結182

9不可變的存儲器183
放棄隱藏的更新183
如何破壞Flux架構184
獲取存儲器數據186
一切皆不可變187
強制執行單向數據流187
縱橫交錯的單向數據流188
過多的存儲器？189
沒有足夠的動作189
強制不可變性190
不可變數據的成本195
垃圾回收是昂貴的196
批量轉換196
抵消成本197
使用Immutable js 197
不可變列表和映射198
不可變的轉換201
變化檢測204
小結208

10實現分發器209
抽象分發器接口209
存儲器的註冊地209
分發負載210
依賴關係的處理211
分發器所面臨的挑戰212
教育的目的212
單例模式的分發器212
手動註冊存儲器213
容易出錯的依賴管理213
構建分發器模塊214
封裝存儲器的引用214
處理依賴215
分發動作217
優化存儲器的註冊220
基礎存儲器類221
一個動作方法222
小結226

11可替代的視圖組件227
ReactJS是適合Flux的227
ReactJS是單向的227
重新渲染數據很簡單229
短小精悍的代碼229
ReactJS的缺點230
虛擬DOM和內存230
JSX和標記語言231
庫鎖定232
使用jQuery和Handlebars 232
為什麼是jQuery和Handlebars 232
渲染模板233
組合視圖236
事件處理238
使用VanillaJS 244
對可選擇性保持開放244
遷移到Re act 244
新的技術熱點245
小結245

12使用Flux庫247
實現核心Flux組件247
自定義分發器247
實現一個基本的存儲器248
創建動作248
實現中遇到的痛點249
分發異步動作249
劃分存儲器249
使用Alt 250
核心理念250
創建存儲器251
聲明動作生成器253
監聽狀態變化254
視圖渲染以及分發動作255
使用Redux 258
核心思想258
狀態轉換器和存儲器259
Redux動作262
渲染組件和分發動作264
小結269

13測試和性能270
你好，Jest 270
測試動作生成器272
同步函數273
異步函數274
測試存儲器277
測試存儲器監聽器277
測試初始狀態280
性能目標283
用戶感知的性能283
測量的性能284
性能需求284
分析工具285
異步動作285
存儲器內存285
CPU佔用286
基準測試工具286
代碼的基準測試286
狀態轉換287
小結290

14Flux和軟件開發的生命週期291
Flux的開放性解釋291
實現選項一：只是模式292
實現選項二：使用Flux庫292
實現並使用自己的Flux 292
開發方法論293
在 Flux初期要考慮的事情293
成熟的Flux應用294
從Flux中獲得的啟示294
單向數據流295
信息設計為王295
打包Flux組件295
完整獨立的Flux 296
可安裝的軟件包296
可安裝的Flux組件296
小結304