Flux架構

《Flux架構》一書原作者Adam Boduch（亞當 博達哈），中文版由段金辰、馬雪琴、李勝、馬飛 等譯，電子工業出版社2017年7月出版

基本介紹

• 書名：Flux架構
• 作者：【加】Adam Boduch（亞當 博達哈）
• 譯者：段金辰 馬雪琴 李勝 馬飛 等
• ISBN：978-7-121-31600-5
• 頁數：328
• 定價：89.00
• 出版社：電子工業出版社
• 出版時間：2017年7月
• 開本：16

內容提要

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

《Flux架構》適用於前端開發者，以及希望對Flux 架構有深入了解的人群。

目錄

前言 XIX

1 Flux是什麼 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

2 Flux的原則 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

-- web socket連線 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

-- 遷移到 React 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

14 Flux和軟體開發的生命周期 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