|
|
|
本書以San為例，結合具體的實現，從框架設計、工程鏈路、跨端開發和全棧實現等方面說明了如何優化前端框架的性能。主要內容包括：San的組件化設計、回應式的資料設計，以及資料流程管理等知識；SanSSR的設計及其在業務中的具體運用；在“開發–調試–編譯–部署”工作流中用於提升效率的工具，專門為San開發的命令列工具SanCLI，以及對應的視覺化介面實現；San的跨端融合支持；San的發展規劃。本書適合所有前端開發人員閱讀。
百度KFive
是百度App大前端團隊，在業務支援之外，KFive研究的技術方向很廣，包括人工智慧、跨端融合，等等。KFive的名稱不僅來源於起初的辦公地點在百度科技園5號樓，更體現了其對軟體發展的理解，即“五Key”：Key1者，精益求精；Key2者，大巧不工；Key3者，獨運匠心；Key4者，百煉千錘；Key5者，善始善終。
第1章 San，一個新的起點 1
1．1 San的誕生 3
1．2 San的特性 3
1．3 框架對比 6
1．3．1 抽象程度 6
1．3．2 運行時和預編譯 7
1．3．3 同構與跨端 8
1．3．4 生態 8
1．4 為什麼選擇San 9
1．5 小結 10
第2章 組件，一切的起點 11
2．1 從實際項目出發，實現一個簡單的San 11
2．1．1 實現一篇文章 11
2．1．2 實現文章列表 13
2．1．3 抽象出文章類 16
2．1．4 數據驅動視圖的邏輯 18
2．2 編寫第 一個San元件 21
2．2．1 安裝San 21
2．2．2 Hello San 23
2．3 使用San實現文章項 24
2．3．1 使用HTML語法描述結構 25
2．3．2 使用CSS控制樣式 25
2．4 聲明式的視圖範本 26
2．4．1 插值語法 27
2．4．2 屬性綁定 30
2．4．3 運算式 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 迴圈 44
2．6．3 源碼解析 47
2．7 San組件 49
2．7．1 組件定義 50
2．7．2 生命週期 51
2．7．3 視圖範本 53
2．7．4 數據 54
2．7．5 組件引用 56
2．8 雙向綁定 58
2．9 工程搭建 61
2．10 小結 66
第3章 數據，組件的基石 68
3．1 回應式原理 69
3．1．1 如何追蹤數據變化 69
3．1．2 主動式數據變化追蹤 72
3．1．3 如何收集依賴 81
3．1．4 如何觸發視圖更新 86
3．2 視圖更新 87
3．2．1 視圖更新過程 87
3．2．2 ANode 91
3．2．3 基於ANode的預處理 92
3．2．4 節點遍歷中斷 99
3．3 數據及其更新 100
3．3．1 數據定義 101
3．3．2 數據校驗 106
3．4 狀態管理 111
3．4．1 為什麼要進行狀態管理 111
3．4．2 基礎使用 113
3．4．3 san-store的實現原理 117
3．4．4 san-update庫 128
3．4．5 實例 135
3．5 小結 138
第4章 組件進階，構造複雜的前端應用 139
4．1 組件間通信 141
4．1．1 父子組件通信 142
4．1．2 更多元件通信方式 149
4．2 插槽 151
4．2．1 數據環境 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 小結 164
第5章 服務端渲染 166
5．1 服務端渲染的用途 166
5．1．1 單頁應用的問題 166
5．1．2 引入服務端渲染 167
5．1．3 應用場景評估 168
5．2 如何做服務端渲染 169
5．2．1 立即使用San SSR 170
5．2．2 開發支援SSR的元件 172
5．2．3 編譯到其他語言和平臺 174
5．3 San SSR的工作原理 176
5．3．1 San服務端渲染過程 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 數據注釋 183
5．4．3 複合插值文本 184
5．4．4 調用組件反解 184
5．5 服務端渲染優化 185
5．5．1 預渲染優化 186
5．5．2 正確使用render 187
5．5．3 編譯到源碼 188
5．5．4 複用運行時工具庫 189
5．6 小結 190
第6章 San命令列工具 192
6．1 為什麼需要San CLI 192
6．2 命令列工具的實現 193
6．2．1 解析命令列參數 193
6．2．2 命令列工具的發佈和調試 194
6．2．3 基於yargs的命令列模組 195
6．2．4 命令列外掛程式化的實現 197
6．3 打造San項目腳手架 198
6．3．1 實現簡單的項目腳手架 199
6．3．2 實現可交互的項目腳手架 200
6．3．3 腳手架的完整實現邏輯 209
6．3．4 更好地組織代碼 210
6．4 San CLI的構建方案 213
6．4．1 編譯與構建 214
6．4．2 構建方案的技術選型 217
6．4．3 San CLI的構建方案 218
6．5 San CLI的整體架構 231
6．6 開箱即用的最佳實踐 233
6．6．1 語言層面的支援 233
6．6．2 開發調試 235
6．6．3 面向專案部署 239
6．6．4 性能優化 242
6．7 小結 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載入器的構建流程 261
7．3．4 San載入器的整體運行流程 270
7．4 實現組件的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的實現 276
7．5 利用APack實現組件的傳輸優化 284
7．5．1 從範本到ANode 284
7．5．2 從ANode到APack 286
7．5．3 APack的實現原理 287
7．6 小結 296
第8章 測試與調試 297
8．1 San DevTools簡介 297
8．1．1 San DevTools的設計初衷 297
8．1．2 技術選型 298
8．2 San DevTools中的通信 299
8．2．1 工作原理 299
8．2．2 構建WebSocket服務 300
8．2．3 構建Bridge與協議解耦 301
8．2．4 構建調試頁面與被調試頁面之間的通信通道 303
8．3 San DevTools中的數據收集和處理 307
8．3．1 收集頁面中的San數據 307
8．3．2 構建Agent 309
8．3．3 構建頁面元件樹 311
8．3．4 即時修改組件數據 315
8．3．5 元件性能數據的處理 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 小結 336
第9章 San Native跨端融合 337
9．1 跨平臺開發 337
9．1．1 JavaScript驅動的NA原生渲染 338
9．1．2 跨端渲染方案的優缺點 338
9．2 渲染引擎 342
9．2．1 供JavaScript調用的渲染API 342
9．2．2 宿主所使用的渲染引擎 342
9．2．3 實現JavaScript代碼 343
9．3 高性能的跨端技術方案 343
9．3．1 回應式驅動NA渲染 344
9．3．2 適配跨端渲染 345
9．3．3 視圖設計 346
9．3．4 事件系統 348
9．3．5 樣式選擇器 351
9．4 San Native的Web化 362
9．4．1 Web化的背後原理 362
9．4．2 Native渲染與Web渲染的差異 364
9．5 共用機制和多bundle 365
9．6 小結 368
第10章 San的未來 369
