SPA設計與架構：理解單頁面Web應用

第1部分基礎知識1
1 單頁面應用程序介紹3
1.1SPA簡述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.3SPA應用相較傳統Web應用的優勢12
1.4溫故知新13
1.5優秀SPA應用的構成15
1.5.1組織項目15
1.5.2創建可維護的松耦合UI17
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.1MV*概念24
2.1.1傳統UI設計模式25
2.1.2MV*和瀏覽器環境27
2.2MV*基礎概念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創建公有API70
3.3.3允許全局導入73
3.3.4創建模塊的命名空間73
3.4模塊加載及依賴管理74
3.4.1腳本加載器74
3.4.2異步模塊定義——AMD75
3.4.3通過RequireJS實踐AMD76
3.5挑戰環節81
3.6小結81
第2部分 核心概念83
4 單頁面導航85
4.1客戶端路由器概念86
4.1.1傳統導航86
4.1.2SPA導航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.2HTML5歷史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.2Region109
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.2API提供對內部功能的訪問控制133
6.1.3SRP——以單一目的作為設計出發點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.2HTTP請求方法159
7.2.3數據轉換160
7.3使用MV*框架161
7.3.1請求生成162
7.3.2通過回調函數處理結果165
7.3.3通過Promise處理結果166
7.3.4Promise錯誤處理170
7.4RESTfulWeb服務調用172
7.4.1什麼是REST172
7.4.2REST原則172
7.4.3MV*框架的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.1QUnit起步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.1TaskRunner的常見用途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.2TaskRunner選擇212
9.3本章示例項目213
9.3.1Gulp.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 XMLHttpRequestAPI259
C 第7章內容的服務器端設置與總結266
D 安裝Node.js與Gulp.js277