高性能MVVM框架的設(shè)計與實現(xiàn)

第 1章 San，一個新的起點 1
1．1 San的誕生 3
1．2 San的特性 3
1．3 框架對比 6
1．3．1 抽象程度 6
1．3．2 運行時和預(yù)編譯 7
1．3．3 同構(gòu)與跨端 8
1．3．4 生態(tài) 8
1．4 為什么選擇San 9
1．5 小結(jié) 10
第 2章 組件，一切的起點 11
2．1 從實際項目出發(fā)，實現(xiàn)一個簡單的San 11
2．1．1 實現(xiàn)一篇文章 11
2．1．2 實現(xiàn)文章列表 13
2．1．3 抽象出文章類 16
2．1．4 數(shù)據(jù)驅(qū)動視圖的邏輯 18
2．2 編寫第 一個San組件 21
2．2．1 安裝San 21
2．2．2 Hello San 23
2．3 使用San實現(xiàn)文章項 24
2．3．1 使用HTML語法描述結(jié)構(gòu) 25
2．3．2 使用CSS控制樣式 25
2．4 聲明式的視圖模板 26
2．4．1 插值語法 27
2．4．2 屬性綁定 30
2．4．3 表達(dá)式 32
2．4．4 方法 33
2．4．5 過濾器 34
2．5 事件 35
2．5．1 事件修飾符 38
2．5．2 自定義事件 39
2．6 指令 41
2．6．1 條件 41
2．6．2 循環(huán) 44
2．6．3 源碼解析 47
2．7 San組件 49
2．7．1 組件定義 50
2．7．2 生命周期 51
2．7．3 視圖模板 53
2．7．4 數(shù)據(jù) 54
2．7．5 組件引用 56
2．8 雙向綁定 58
2．9 工程搭建 61
2．10 小結(jié) 66
第3章 數(shù)據(jù)，組件的基石 68
3．1 響應(yīng)式原理 69
3．1．1 如何追蹤數(shù)據(jù)變化 69
3．1．2 主動式數(shù)據(jù)變化追蹤 72
3．1．3 如何收集依賴 81
3．1．4 如何觸發(fā)視圖更新 86
3．2 視圖更新 87
3．2．1 視圖更新過程 87
3．2．2 ANode 91
3．2．3 基于ANode的預(yù)處理 92
3．2．4 節(jié)點遍歷中斷 99
3．3 數(shù)據(jù)及其更新 100
3．3．1 數(shù)據(jù)定義 101
3．3．2 數(shù)據(jù)校驗 106
3．4 狀態(tài)管理 111
3．4．1 為什么要進(jìn)行狀態(tài)管理 111
3．4．2 基礎(chǔ)使用 113
3．4．3 san-store的實現(xiàn)原理 117
3．4．4 san-update庫 128
3．4．5 實例 135
3．5 小結(jié) 138
第4章 組件進(jìn)階，構(gòu)造復(fù)雜的前端應(yīng)用 139
4．1 組件間通信 141
4．1．1 父子組件通信 142
4．1．2 更多組件通信方式 149
4．2 插槽 151
4．2．1 數(shù)據(jù)環(huán)境 152
4．2．2 命名 153
4．2．3 作用域插槽 155
4．3 路由 157
4．4 動畫和過渡 160
4．4．1 s-transition 161
4．4．2 動畫控制器 161
4．5 APack 163
4．6 小結(jié) 164
第5章 服務(wù)端渲染 166
5．1 服務(wù)端渲染的用途 166
5．1．1 單頁應(yīng)用的問題 166
5．1．2 引入服務(wù)端渲染 167
5．1．3 應(yīng)用場景評估 168
5．2 如何做服務(wù)端渲染 169
5．2．1 立即使用San SSR 170
5．2．2 開發(fā)支持SSR的組件 172
5．2．3 編譯到其他語言和平臺 174
5．3 San SSR的工作原理 176
5．3．1 San服務(wù)端渲染過程 176
5．3．2 組件信息解析 177
5．3．3 編譯到render AST 178
5．3．4 render的代碼生成 180
5．4 客戶端反解 182
5．4．1 組件反解的概念 182
5．4．2 數(shù)據(jù)注釋 183
5．4．3 復(fù)合插值文本 184
5．4．4 調(diào)用組件反解 184
5．5 服務(wù)端渲染優(yōu)化 185
5．5．1 預(yù)渲染優(yōu)化 186
5．5．2 正確使用render 187
5．5．3 編譯到源碼 188
5．5．4 復(fù)用運行時工具庫 189
5．6 小結(jié) 190
第6章 San命令行工具 192
6．1 為什么需要San CLI 192
6．2 命令行工具的實現(xiàn) 193
6．2．1 解析命令行參數(shù) 193
6．2．2 命令行工具的發(fā)布和調(diào)試 194
6．2．3 基于yargs的命令行模塊 195
6．2．4 命令行插件化的實現(xiàn) 197
6．3 打造San項目腳手架 198
6．3．1 實現(xiàn)簡單的項目腳手架 199
6．3．2 實現(xiàn)可交互的項目腳手架 200
6．3．3 腳手架的完整實現(xiàn)邏輯 209
6．3．4 更好地組織代碼 210
6．4 San CLI的構(gòu)建方案 213
6．4．1 編譯與構(gòu)建 214
6．4．2 構(gòu)建方案的技術(shù)選型 217
6．4．3 San CLI的構(gòu)建方案 218
6．5 San CLI的整體架構(gòu) 231
6．6 開箱即用的最佳實踐 233
6．6．1 語言層面的支持 233
6．6．2 開發(fā)調(diào)試 235
6．6．3 面向項目部署 239
6．6．4 性能優(yōu)化 242
6．7 小結(jié) 248
第7章 組件編譯和HMR 249
7．1 San單文件組件 249
7．1．1 一個簡單的San單文件組件 249
7．1．2 單文件組件的特性 250
7．2 單文件組件編譯的配置 251
7．2．1 加載器和插件 251
7．2．2 San加載器簡介 254
7．3 單文件組件編譯的原理 254
7．3．1 提取San文件中的模板、腳本和樣式 255
7．3．2 從單文件組件到San組件 259
7．3．3 San加載器的構(gòu)建流程 261
7．3．4 San加載器的整體運行流程 270
7．4 實現(xiàn)組件的HMR 271
7．4．1 webpack HMR簡介 271
7．4．2 HMR的工作原理 271
7．4．3 san-hot-loader簡介 275
7．4．4 San組件的HMR的實現(xiàn) 276
7．5 利用APack實現(xiàn)組件的傳輸優(yōu)化 284
7．5．1 從模板到ANode 284
7．5．2 從ANode到APack 286
7．5．3 APack的實現(xiàn)原理 287
7．6 小結(jié) 296
第8章 測試與調(diào)試 297
8．1 San DevTools簡介 297
8．1．1 San DevTools的設(shè)計初衷 297
8．1．2 技術(shù)選型 298
8．2 San DevTools中的通信 299
8．2．1 工作原理 299
8．2．2 構(gòu)建WebSocket服務(wù) 300
8．2．3 構(gòu)建Bridge與協(xié)議解耦 301
8．2．4 構(gòu)建調(diào)試頁面與被調(diào)試頁面之間的通信信道 303
8．3 San DevTools中的數(shù)據(jù)收集和處理 307
8．3．1 收集頁面中的San數(shù)據(jù) 307
8．3．2 構(gòu)建Agent 309
8．3．3 構(gòu)建頁面組件樹 311
8．3．4 實時修改組件數(shù)據(jù) 315
8．3．5 組件性能數(shù)據(jù)的處理 317
8．3．6 事件與消息 324
8．3．7 san-store中的時間旅行 326
8．4 單元測試 332
8．4．1 DOM測試 332
8．4．2 快照測試 335
8．5 小結(jié) 336
第9章 San Native跨端融合 337
9．1 跨平臺開發(fā) 337
9．1．1 JavaScript驅(qū)動的NA原生渲染 338
9．1．2 跨端渲染方案的優(yōu)缺點 338
9．2 渲染引擎 342
9．2．1 供JavaScript調(diào)用的渲染API 342
9．2．2 宿主所使用的渲染引擎 342
9．2．3 實現(xiàn)JavaScript代碼 343
9．3 高性能的跨端技術(shù)方案 343
9．3．1 響應(yīng)式驅(qū)動NA渲染 344
9．3．2 適配跨端渲染 345
9．3．3 視圖設(shè)計 346
9．3．4 事件系統(tǒng) 348
9．3．5 樣式選擇器 351
9．4 San Native的Web化 362
9．4．1 Web化的背后原理 362
9．4．2 Native渲染與Web渲染的差異 364
9．5 共享機(jī)制和多bundle 365
9．6 小結(jié) 368
第 10章 San的未來 369