高性能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