高性能MVVM框架的設計與實現——San

百度 KFive 是百度 App 大前端團隊，在業務支持之外，KFive 研究的技術方向很廣，包括人工智能、跨端融合，等等。KFive 的名稱不僅來源於起初的辦公地點在百度科技園 5 號樓，更體現了其對軟件開發的理解，即“五 Key”：Key1者，精益求精；Key2 者，大巧不工；Key3 者，獨運匠心；Key4 者，百煉千錘；Key5 者，善始善終。

 

作者簡介：

 

王永青 ：網名“三水清”，百度資深研發專家，曾經先後服務於微博、騰訊，2013 年加入百度，開始移動前端開發工作。先後負責百度 App 的前端技術架構、垂類、用戶增長、小遊戲、Feed 等業務。目前主要從事 Feed 前端架構、San 框架工具鏈研發等工作。對於跨端開發、工程化、性能優化和前端架構等有較豐富的經驗。

 

樊中愷 ：百度資深研發專家，2011 年加入百度，2013 年開始移動研發工作。對前端技術架構、前端 AI、前端智能化、微前端等方向有豐富的開發經驗。目前工作主要面向前後端架構設計、Web AI 和跨端研發等方向。曾參與清華大學前端公開課程建設，多次出品和參與前端方向的主題會議，翻譯出版多部技術圖書。

 

錢思成 ：百度資深研發工程師，長期負責搜索性能優化和前端架構開發。曾負責搜索性能評價和監控體系建設、組件化、微前端化、UI 自動化等方向的工作，是極速搜索、簡單搜索、手機百度 App 搜索等重要項目的核心參與者。

 

王凱 ：百度資深前端研發工程師，2017 年加入百度，長期深耕百度通用組件、工程效能平臺、電商等技術業務方向。經歷和推進了百度搜索樂高平臺化配置系統的全面架構進化和落地，在組件、主題、樣式等領域積累了大量實踐經驗，影響搜索 PV 十億級別日流量，主導開發的組件庫涉及 H5、NA、小程序等業務場景。

 

梅旭光 ：百度資深研發工程師，目前負責搜索組件化渲染框架、服務端渲染架構的研發工作。Node.js Core Collaborator，GMTC 講師，San-SSR Maintainer，曾發布語言轉換器 ts2php、多端統一開發框架 Mars 等開源項目。對前端框架、服務端渲染設計和實現有較為豐富的經驗，致力於提升 Web 產品的用戶體驗。

 

錢思成 ：2016 年加入百度，曾參與百度 MIP 項目，負責搜索結果頁極速瀏覽框架、San 服務器端渲染框架、搜索結果頁前端架構改進。2021 年加入微軟中國，任資深軟件工程師。QCon+ 講師，百度技術學院講師，LiquidJS 模板引擎作者，翻譯出版多部技術圖書。

 

楊珺：百度資深研發工程師，長期負責搜索性能優化和前端架構開發。曾負責搜索性能評價和監控體系建設、組件化、微前端化、UI 自動化等方向的工作，是極速搜索、簡單搜索、手機百度 App 搜索等重要項目的核心參與者。

 

金展 ：百度資深前端研發工程師，曾先後負責百度知道、百度經驗、百度 App、百家號等多個百度產品線的前端技術疊代和性能優化工作，以及 San 命令行工具 San CLI、San 組合式 API、前端組件庫 Santd 等開源生態的升級維護。

廖煥宇 ：百度前端工程師，主要關註跨端動態渲染技術，前端代碼規範，效能提升與性能優化；深度參與 San 生態建設；喜歡分享軟件開發經驗，在 GitHub 中創建了一些實用的提效工具。

 

朱國璽 ：技術專家，百度資深研發工程師，2016 年加入百度，先後參與百度貼吧、MIP、搜索、百度 App 等項目的架構設計與研發，具有多年跨端融合研發經驗，目前專註於百度 App 動態 NA 化等技術方向。

 

第 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