Flux架構(gòu)

目錄
前言 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． XIX
1 Flux是什么 ．．．．．．．．．．．．．．．．．．．． 1
Flux是一套模式 ．．．．．．．．．．．．．．．．．．．．．．．．． 1
數(shù)據(jù)入口 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 1
狀態(tài)管理 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 2
保持同步更新 ．．．．．．．．．．．．．．．．．．．．． 3
信息架構(gòu) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 4
Flux并不是一個框架 ．．．．．．．．．．．．．．．．． 4
Flux的設(shè)計思路問題解決方案 ． 5
數(shù)據(jù)流向 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 5
可回溯性 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 7
通知的一致性 ．．．．．．．．．．．．．．．．．．．．． 8
簡捷的架構(gòu)分層 ．．．．．．．．．．．．．．．．． 9
低耦合渲染 ．．．．．．．．．．．．．．．．．．．．．．．．． 9
Flux組件 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 10
動作 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 10
分發(fā)器 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 11
存儲器 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 12
視圖 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 12
安裝 Flux軟件包 ．．．．．．．．．．．．．．．．．．．．．． 14
小結(jié) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 16

2 Flux的原則 ．．．．．．．．．．．．．．．．．． 17
MV*所面臨的挑戰(zhàn) ．．．．．．．．．．．．．．．．．．． 17
關(guān)注點分離 ．．．．．．．．．．．．．．．．．．．．．．． 18
級聯(lián)更新 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 19
模型更新的職責(zé) ．．．．．．．．．．．．．．． 20
單向數(shù)據(jù) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 21
從開始到結(jié)束 ．．．．．．．．．．．．．．．．．．． 22
無毒無害 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 23
顯式優(yōu)于隱式 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 23
暗藏隱患的更新 ．．．．．．．．．．．．．．． 24
集中修改狀態(tài)的地方 ．．．．．．． 26
太多動作？ ．．．．．．．．．．．．．．．．．．．．．．． 26
分層優(yōu)于嵌套 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 27
多組件嵌套 ．．．．．．．．．．．．．．．．．．．．．．． 27
嵌套深度與副作用 ．．．．．．．．．．． 28
數(shù)據(jù)流和分層 ．．．．．．．．．．．．．．．．．．． 28
應(yīng)用數(shù)據(jù)和界面狀態(tài) ．．．．．．．．．．．．．．． 29
兩個相同的東西 ．．．．．．．．．．．．．．． 29
強(qiáng)耦合轉(zhuǎn)換 ．．．．．．．．．．．．．．．．．．．．．．． 30
功能中心化 ．．．．．．．．．．．．．．．．．．．．．．． 31
小結(jié) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 31
3 搭建骨架架構(gòu) ．．．．．．．．．．．．．．． 32
總體組織 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 32
目錄結(jié)構(gòu) ．．．．．．．．．．．．．．．．．．．．．．．．．．． 33
依賴管理 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 33
信息設(shè)計 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 34
用戶不需要了解模型 ．．．．．．． 34
存儲器映射用戶看到的內(nèi)容 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 35
和哪些東西協(xié)同工作 ．．．．．．． 36
在動作中注入存儲器 ．．．．．．．．．．．．．．． 36
獲取 API數(shù)據(jù) ．．．．．．．．．．．．．．．．．．． 36
改變 API資源狀態(tài) ．．．．．．．．．．． 42
本地動作 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 47
存儲器和功能域 ．．．．．．．．．．．．．．．．．．．．．．． 50
梳理頂層功能 ．．．．．．．．．．．．．．．．．．． 50
無關(guān)緊要的 API數(shù)據(jù) ．．．．．．． 51
構(gòu)造存儲器數(shù)據(jù) ．．．．．．．．．．．．．．． 53
模擬視圖 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 53
找尋失去的數(shù)據(jù) ．．．．．．．．．．．．．．． 53
定位動作 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 54
端到端場景 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 56
動作清單 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 56
存儲器清單 ．．．．．．．．．．．．．．．．．．．．．．． 56
視圖清單 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 57
小結(jié) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 57
4 創(chuàng)建動作 ．．．．．．．．．．．．．．．．．．．．．． 58
動作的名稱和常量 ．．．．．．．．．．．．．．．．．．． 58
動作命名約定 ．．．．．．．．．．．．．．．．．．． 58
靜態(tài)動作數(shù)據(jù) ．．．．．．．．．．．．．．．．．．． 59
組織動作常量 ．．．．．．．．．．．．．．．．．．． 62
特性動作生成器 ．．．．．．．．．．．．．．．．．．．．．．． 63
什么時候需要模塊化 ．．．．．．． 63
模塊化架構(gòu) ．．．．．．．．．．．．．．．．．．．．．．． 64
模擬數(shù)據(jù) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 65
模擬已存在的接口 ．．．．．．．．．．． 65
模擬新接口 ．．．．．．．．．．．．．．．．．．．．．．． 66
替換動作生成器 ．．．．．．．．．．．．．．． 70
狀態(tài)動作生成器 ．．．．．．．．．．．．．．．．．．．．．．． 71
整合其他系統(tǒng) ．．．．．．．．．．．．．．．．．．． 72
web socket連接 ．．．．．．．．．．．．．．．． 73
參數(shù)化動作生成器 ．．．．．．．．．．．．．．．．．．． 76
刪除多余的動作 ．．．．．．．．．．．．．．． 76
保持動作的通用性 ．．．．．．．．．．． 77
創(chuàng)建衍生動作 ．．．．．．．．．．．．．．．．．．． 80
小結(jié) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 81
5 異步動作 ．．．．．．．．．．．．．．．．．．．．．． 83
保持 Flux同步 ．．．．．．．．．．．．．．．．．．．．．．．．．． 83
為什么要同步 ．．．．．．．．．．．．．．．．．．． 83
壓縮異步行為 ．．．．．．．．．．．．．．．．．．． 84
異步動作語義 ．．．．．．．．．．．．．．．．．．． 85
創(chuàng)建 API調(diào)用 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 87
API是常見的情況 ．．．．．．．．．．．． 87
API調(diào)用和用戶交互 ．．．．．．．． 88
結(jié)合 API調(diào)用 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 92
復(fù)雜的動作生成器 ．．．．．．．．．．． 93
組合動作生成器 ．．．．．．．．．．．．．．． 96
返回 promise ．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 97
不含 promise的同步 ．．．．．．．． 98
組織異步行為 ．．．．．．．．．．．．．．．．．．． 99
錯誤處理 ．．．．．．．．．．．．．．．．．．．．．．．．． 101
小結(jié) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 103
6 改變 Flux存儲器的狀態(tài) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．105
適應(yīng)不斷變化的信息 ．．．．．．．．．．．．． 105
變化的 API數(shù)據(jù) ．．．．．．．．．．．．． 105
變化的功能 ．．．．．．．．．．．．．．．．．．．．． 106
受影響的組件 ．．．．．．．．．．．．．．．．． 107
減少重復(fù)的存儲器數(shù)據(jù) ．．．．．．．．． 107
通用存儲器數(shù)據(jù) ．．．．．．．．．．．．． 107
注冊通用存儲器 ．．．．．．．．．．．．． 108
結(jié)合通用和專用數(shù)據(jù) ．．．．． 112
處理存儲器的依賴關(guān)系 ．．．．．．．．． 116
等待存儲器 ．．．．．．．．．．．．．．．．．．．．． 116
數(shù)據(jù)依賴 ．．．．．．．．．．．．．．．．．．．．．．．．． 118
UI依賴 ．．．．．．．．．．．．．．．．．．．．．．．．．．．． 119
視圖的更新順序 ．．．．．．．．．．．．．．．．．．．．． 125
存儲器的注冊順序 ．．．．．．．．． 125
視圖渲染的優(yōu)先級排序 ． 125
處理存儲器復(fù)雜度 ．．．．．．．．．．．．．．．．． 126
存儲器太多 ．．．．．．．．．．．．．．．．．．．．． 126
反思功能域 ．．．．．．．．．．．．．．．．．．．．． 126
小結(jié) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 127
7 視圖信息 ．．．．．．．．．．．．．．．．．．．．．128
傳遞視圖數(shù)據(jù) ．．．．．．．．．．．．．．．．．．．．．．．．． 128
change事件中的數(shù)據(jù) ．．．．． 128
視圖決定何時渲染 ．．．．．．．．． 132
保持視圖無狀態(tài) ．．．．．．．．．．．．．．．．．．．．． 135
UI狀態(tài)屬于存儲器 ．．．．．．．． 135
不用查詢 DOM ．．．．．．．．．．．．．．． 135
視圖的職責(zé) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 136
渲染存儲器數(shù)據(jù) ．．．．．．．．．．．．． 136
子視圖結(jié)構(gòu) ．．．．．．．．．．．．．．．．．．．．． 137
用戶交互 ．．．．．．．．．．．．．．．．．．．．．．．．． 138
在 Flux中使用 ReactJS ．．．．．．．．．． 138
設(shè)置視圖狀態(tài) ．．．．．．．．．．．．．．．．． 139
組成視圖 ．．．．．．．．．．．．．．．．．．．．．．．．． 143
響應(yīng)事件 ．．．．．．．．．．．．．．．．．．．．．．．．． 146
路由和動作 ．．．．．．．．．．．．．．．．．．．．． 149
小結(jié) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 154
8 信息的生命周期 ．．．．．．．．．．．155
組件生命周期難題 ．．．．．．．．．．．．．．．．． 155
回收不再使用的資源 ．．．．． 156
隱藏依賴 ．．．．．．．．．．．．．．．．．．．．．．．．． 157
內(nèi)存泄漏 ．．．．．．．．．．．．．．．．．．．．．．．．． 157
Flux結(jié)構(gòu)是靜態(tài)的 ．．．．．．．．．．．．．．．．． 158
單例模式 ．．．．．．．．．．．．．．．．．．．．．．．．． 158
與模型進(jìn)行比較 ．．．．．．．．．．．．． 161
靜態(tài)視圖 ．．．．．．．．．．．．．．．．．．．．．．．．． 161
擴(kuò)展信息 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 165
如何很好地擴(kuò)展 ．．．．．．．．．．．．． 165
昀小化所需信息 ．．．．．．．．．．．．． 169
擴(kuò)展的動作 ．．．．．．．．．．．．．．．．．．．．． 169
閑置的存儲器 ．．．．．．．．．．．．．．．．．．．．．．．．． 170
刪除存儲器數(shù)據(jù) ．．．．．．．．．．．．． 170
優(yōu)化閑置的存儲器 ．．．．．．．．． 173
保持存儲器數(shù)據(jù) ．．．．．．．．．．．．． 174
小結(jié) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 182
9 不可變的存儲器 ．．．．．．．．．．．183
放棄隱藏的更新 ．．．．．．．．．．．．．．．．．．．．． 183
如何破壞 Flux架構(gòu) ．．．．．．．． 184
獲取存儲器數(shù)據(jù) ．．．．．．．．．．．．． 186
一切皆不可變 ．．．．．．．．．．．．．．．．． 187
強(qiáng)制執(zhí)行單向數(shù)據(jù)流 ．．．．．．．．．．．．． 187
縱橫交錯的單向數(shù)據(jù)流 ． 188
過多的存儲器？ ．．．．．．．．．．．．． 189
沒有足夠的動作 ．．．．．．．．．．．．． 189
強(qiáng)制不可變性 ．．．．．．．．．．．．．．．．． 190
不可變數(shù)據(jù)的成本 ．．．．．．．．．．．．．．．．． 195
垃圾回收是昂貴的 ．．．．．．．．． 196
批量轉(zhuǎn)換 ．．．．．．．．．．．．．．．．．．．．．．．．． 196
抵消成本 ．．．．．．．．．．．．．．．．．．．．．．．．． 197
使用 Immutable．js ．．．．．．．．．．．．．．．．．．． 197
不可變列表和映射 ．．．．．．．．． 198
不可變的轉(zhuǎn)換 ．．．．．．．．．．．．．．．．． 201
變化檢測 ．．．．．．．．．．．．．．．．．．．．．．．．． 204
小結(jié) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 208
10 實現(xiàn)分發(fā)器 ．．．．．．．．．．．．．．．．209
抽象分發(fā)器接口 ．．．．．．．．．．．．．．．．．．．．． 209
存儲器的注冊地 ．．．．．．．．．．．．． 209
分發(fā)負(fù)載 ．．．．．．．．．．．．．．．．．．．．．．．．． 210
依賴關(guān)系的處理 ．．．．．．．．．．．．． 211
分發(fā)器所面臨的挑戰(zhàn) ．．．．．．．．．．．．． 212
教育的目的 ．．．．．．．．．．．．．．．．．．．．． 212
單例模式的分發(fā)器 ．．．．．．．．． 212
手動注冊存儲器 ．．．．．．．．．．．．． 213
容易出錯的依賴管理 ．．．．． 213
構(gòu)建分發(fā)器模塊 ．．．．．．．．．．．．．．．．．．．．． 214
封裝存儲器的引用 ．．．．．．．．． 214
處理依賴 ．．．．．．．．．．．．．．．．．．．．．．．．． 215
分發(fā)動作 ．．．．．．．．．．．．．．．．．．．．．．．．． 217
優(yōu)化存儲器的注冊 ．．．．．．．．．．．．．．．．． 220
基礎(chǔ)存儲器類 ．．．．．．．．．．．．．．．．． 221
一個動作方法 ．．．．．．．．．．．．．．．．． 222
小結(jié) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 226
11 可替代的視圖組件 ．．．．．227
ReactJS是適合 Flux的 ．．．．．．．．．． 227
ReactJS是單向的 ．．．．．．．．．．． 227
重新渲染數(shù)據(jù)很簡單 ．．．．． 229
短小精悍的代碼 ．．．．．．．．．．．．． 229
ReactJS的缺點 ．．．．．．．．．．．．．．．．．．．．．．． 230
虛擬 DOM和內(nèi)存 ．．．．．．．．．． 230
JSX和標(biāo)記語言 ．．．．．．．．．．．．．． 231
庫鎖定 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 232
使用 jQuery和 Handlebars ．．．．． 232

為什么是 jQuery和 Handlebars ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 232
渲染模板 ．．．．．．．．．．．．．．．．．．．．．．．．． 233
組合視圖 ．．．．．．．．．．．．．．．．．．．．．．．．． 236
事件處理 ．．．．．．．．．．．．．．．．．．．．．．．．． 238
使用 VanillaJS ．．．．．．．．．．．．．．．．．．．．．．．．． 244
對可選擇性保持開放 ．．．．． 244
遷移到 React ．．．．．．．．．．．．．．．．．．． 244
新的技術(shù)熱點 ．．．．．．．．．．．．．．．．． 245
小結(jié) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 245
12 使用 Flux庫 ．．．．．．．．．．．．．．247
實現(xiàn)核心 Flux組件 ．．．．．．．．．．．．．．．． 247
自定義分發(fā)器 ．．．．．．．．．．．．．．．．． 247
實現(xiàn)一個基本的存儲器 ． 248
創(chuàng)建動作 ．．．．．．．．．．．．．．．．．．．．．．．．． 248
實現(xiàn)中遇到的痛點 ．．．．．．．．．．．．．．．．． 249
分發(fā)異步動作 ．．．．．．．．．．．．．．．．． 249
劃分存儲器 ．．．．．．．．．．．．．．．．．．．．． 249
使用 Alt ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 250
核心理念 ．．．．．．．．．．．．．．．．．．．．．．．．． 250
創(chuàng)建存儲器 ．．．．．．．．．．．．．．．．．．．．． 251
聲明動作生成器 ．．．．．．．．．．．．． 253
監(jiān)聽狀態(tài)變化 ．．．．．．．．．．．．．．．．． 254
視圖渲染以及分發(fā)動作 ． 255
使用 Redux ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 258
核心思想 ．．．．．．．．．．．．．．．．．．．．．．．．． 258
狀態(tài)轉(zhuǎn)換器和存儲器 ．．．．． 259
Redux動作 ．．．．．．．．．．．．．．．．．．．．．． 262
渲染組件和分發(fā)動作 ．．．．． 264
小結(jié) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 269

13 測試和性能 ．．．．．．．．．．．．．．．．270
你好，Jest ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 270
測試動作生成器 ．．．．．．．．．．．．．．．．．．．．． 272
同步函數(shù) ．．．．．．．．．．．．．．．．．．．．．．．．． 273
異步函數(shù) ．．．．．．．．．．．．．．．．．．．．．．．．． 274
測試存儲器 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 277
測試存儲器監(jiān)聽器 ．．．．．．．．． 277
測試初始狀態(tài) ．．．．．．．．．．．．．．．．． 280
性能目標(biāo) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 283
用戶感知的性能 ．．．．．．．．．．．．． 283
測量的性能 ．．．．．．．．．．．．．．．．．．．．． 284
性能需求 ．．．．．．．．．．．．．．．．．．．．．．．．． 284
分析工具 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 285
異步動作 ．．．．．．．．．．．．．．．．．．．．．．．．． 285
存儲器內(nèi)存 ．．．．．．．．．．．．．．．．．．．．． 285
CPU占用 ．．．．．．．．．．．．．．．．．．．．．．．． 286
基準(zhǔn)測試工具 ．．．．．．．．．．．．．．．．．．．．．．．．． 286
代碼的基準(zhǔn)測試 ．．．．．．．．．．．．． 286
狀態(tài)轉(zhuǎn)換 ．．．．．．．．．．．．．．．．．．．．．．．．． 287
小結(jié) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 290
14 Flux和軟件開發(fā)的生命周期 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．291
Flux的開放性解釋 ．．．．．．．．．．．．．．．．． 291
實現(xiàn)選項一：只是模式 ． 292
實現(xiàn)選項二：使用 Flux庫 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 292
實現(xiàn)并使用自己的 Flux ． 292
開發(fā)方法論 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 293
在 Flux初期要考慮的事情 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 293
成熟的 Flux應(yīng)用 ．．．．．．．．．．．． 294
從 Flux中獲得的啟示 ．．．．．．．．．．．． 294
單向數(shù)據(jù)流 ．．．．．．．．．．．．．．．．．．．．． 295
信息設(shè)計為王 ．．．．．．．．．．．．．．．．． 295
打包 Flux組件 ．．．．．．．．．．．．．．．．．．．．．．．． 295
完整獨立的 Flux ．．．．．．．．．．．．． 296
可安裝的軟件包 ．．．．．．．．．．．．． 296
可安裝的 Flux組件 ．．．．．．．． 296
小結(jié) ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 304