第1 部分 基礎知識 1
1 單頁麵應用程序介紹 3
1.1 SPA 簡述 4
1.1.1 無須刷新瀏覽器 7
1.1.2 錶現邏輯位於客戶端 7
1.1.3 服務器端事務處理 7
1.2 更進一步 8
1.2.1 以Shell 頁麵開始 8
1.2.2 從傳統頁麵到視圖 9
1.2.3 視圖的産生 10
1.2.4 實現無刷新的視圖切換 11
1.2.5 貫穿動態更新過程的流暢性 12
1.3 SPA 應用相較傳統Web 應用的優勢 12
1.4 溫故知新 13
1.5 優秀SPA 應用的構成 15
1.5.1 組織項目 15
1.5.2 創建可維護的鬆耦閤UI 17
1.5.3 使用JavaScript 模塊 18
1.5.4 執行SPA 導航 19
1.5.5 創建視圖組成與布局 19
1.5.6 模塊通信 20
1.5.7 與服務器端通信 20
1.5.8 執行單元測試 20
1.5.9 客戶端自動化技術 20
1.6 小結 21
2 MV* 框架介紹 22
2.1 MV* 概念 24
2.1.1 傳統UI 設計模式 25
2.1.2 MV* 和瀏覽器環境 27
2.2 MV* 基礎概念 28
2.2.1 框架 29
2.2.2 我們的MV* 項目 30
2.2.3 模型 32
2.2.4 綁定 36
2.2.5 模闆 40
2.2.6 視圖 44
2.3 為什麼要用MV* 框架 44
2.3.1 關注分離 45
2.3.2 簡化日常任務 46
2.3.3 提升生産率 47
2.3.4 標準化 47
2.3.5 可擴展性 48
2.4 框架選擇 48
2.5 挑戰環節 50
2.6 小結 50
3 JavaScript 模塊化 52
3.1 模塊概念 53
3.1.1 模塊模式概念 53
3.1.2 模塊結構 54
3.1.3 揭示模式 55
3.2 模塊化編程的意義 56
3.2.1 避免命名衝突 56
3.2.2 保護代碼完整性 65
3.2.3 隱藏復雜性 67
3.2.4 降低代碼改變帶來的衝擊 68
3.2.5 代碼組織 68
3.2.6 模塊模式的不足 69
3.3 模塊模式剖析 69
3.3.1 可訪問性控製 69
3.3.2 創建公有API 70
3.3.3 允許全局導入 73
3.3.4 創建模塊的命名空間 73
3.4 模塊加載及依賴管理 74
3.4.1 腳本加載器 74
3.4.2 異步模塊定義——AMD 75
3.4.3 通過RequireJS 實踐AMD 76
3.5 挑戰環節 81
3.6 小結 81
第2 部分 核心概念 83
4 單頁麵導航 85
4.1 客戶端路由器概念 86
4.1.1 傳統導航 86
4.1.2 SPA 導航 86
4.2 路由及其配置 88
4.2.1 路由語法 90
4.2.2 路由配置項 90
4.2.3 路由參數 91
4.2.4 缺省路由 93
4.3 客戶端路由器的工作機製 93
4.3.1 片段標識符方式 94
4.3.2 HTML5 曆史API 方式 95
4.3.3 使用HTML5 曆史API 方式 97
4.4 綜閤實作:實現SPA 路由 98
4.4.1 教員列錶(缺省路由) 99
4.4.2 主要聯係人路由 101
4.4.3 教員授課時間(參數化路由) 102
4.5 挑戰環節 104
4.6 小結 105
5 視圖閤成與布局 106
5.1 項目介紹 107
5.2 布局設計概念 108
5.2.1 視圖 108
5.2.2 Region 109
5.2.3 視圖閤成 110
5.2.4 嵌套視圖 111
5.2.5 路由 112
5.3 高級閤成與布局的可選方案 113
5.3.1 優點 113
5.3.2 缺點 114
5.4 設計應用程序 114
5.4.1 設計基本布局 115
5.4.2 設計基本內容 117
5.4.3 在復雜設計中應用視圖管理 122
5.4.4 通過自身狀態創建嵌套視圖 125
5.5 挑戰環節 127
5.6 小結 128
6 模塊間交互 129
6.1 模塊概念迴顧 131
6.1.1 用模塊封裝代碼 131
6.1.2 API 提供對內部功能的訪問控製 133
6.1.3 SRP——以單一目的作為設計齣發點 134
6.1.4 代碼重用——控製項目規模 135
6.2 模塊間交互方式 136
6.2.1 通過依賴進行模塊間交互 136
6.2.2 依賴方式的優缺點 138
6.2.3 通過發布/ 訂閱模式進行模塊間交互 138
6.2.4 發布/ 訂閱模式優缺點 141
6.3 示例項目細節 142
6.3.1 搜索功能 144
6.3.2 顯示産品信息 150
6.4 挑戰環節 155
6.5 小結 155
7 與服務器端通信 156
7.1 示例項目新要求 157
7.2 與服務器端通信綜述 158
7.2.1 選擇數據類型 158
7.2.2 HTTP 請求方法 159
7.2.3 數據轉換 160
7.3 使用MV* 框架 161
7.3.1 請求生成 162
7.3.2 通過迴調函數處理結果 165
7.3.3 通過Promise 處理結果 166
7.3.4 Promise 錯誤處理 170
7.4 RESTful Web 服務調用 172
7.4.1 什麼是REST 172
7.4.2 REST 原則 172
7.4.3 MV* 框架的RESTful 支持 174
7.5 示例項目細節 174
7.5.1 配置REST 調用 174
7.5.2 添加産品到購物車 177
7.5.3 查看購物車 179
7.5.4 修改購物車 181
7.5.5 從購物車中移除産品 183
7.6 挑戰環節 184
7.7 小結 184
8 單元測試 186
8.1 示例項目說明 187
8.2 什麼是單元測試 187
8.2.1 單元測試的好處 188
8.2.2 構建更好的單元測試 189
8.3 傳統的單元測試 192
8.3.1 QUnit 起步 193
8.3.2 創建第一個單元測試 196
8.3.3 測試由MV* 對象創建的代碼 200
8.3.4 測試對DOM 所做的改變 205
8.3.5 混閤使用其他測試框架 206
8.4 挑戰環節 208
8.5 小結 208
9 客戶端任務自動化 209
9.1 Task Runner 的常見用途 210
9.1.1 即時刷新瀏覽器 210
9.1.2 自動化JavaScript 和CSS 的預處理過程 211
9.1.3 自動化Linter 代碼分析 211
9.1.4 持續單元測試 211
9.1.5 文件串接 212
9.1.6 代碼壓縮 212
9.1.7 持續集成 212
9.2 Task Runner 選擇 212
9.3 本章示例項目 213
9.3.1 Gulp.js 介紹 214
9.3.2 創建第一個任務 215
9.3.3 創建代碼分析任務 216
9.3.4 創建瀏覽器刷新任務 218
9.3.5 自動化單元測試 220
9.3.6 創建構建過程 222
9.4 挑戰環節 227
9.5 小結 227
A 員工通訊錄示例說明 229
B XMLHttpRequest API 259
C 第7 章內容的服務器端設置與總結 266
D 安裝Node.js 與Gulp.js 277
· · · · · · (
收起)