如果你的網(wǎng)站還是一系列跳轉頁面，那就落伍了。單頁Web應用（single page web application，SPA）是你接下來的選擇：將用戶界面渲染和業(yè)務邏輯放在瀏覽器端，只在同步數(shù)據(jù)的時候才和服務器通信，它們可以提供流暢的用戶體驗，就像本地應用程序一樣。不過，單頁Web應用的開發(fā)、管理和測試有很大的挑戰(zhàn)。本書展示了從前端到后端都使用javascript來開發(fā)復雜的單頁Web應用，你的團隊能夠很容易地進行設計、測試、維護和擴展，不會受到某個框架的限制。期間你將會使用HTML5、CSS3和javascript的高級開發(fā)技能，Web服務器和數(shù)據(jù)庫的語言也是javascript。本書讀者需要具備基本的Web開發(fā)知識，但不要求具備單頁Web應用的相關開發(fā)經(jīng)驗。 如果你的網(wǎng)站還是一系列跳轉頁面，那就落伍了。單頁Web應用（single page web application，SPA）是你接下來的選擇：將用戶界面渲染和業(yè)務邏輯放在瀏覽器端，只在同步數(shù)據(jù)的時候才和服務器通信，它們可以提供流暢的用戶體驗，就像本地應用程序一樣。不過，單頁Web應用的開發(fā)、管理和測試有很大的挑戰(zhàn)。本書展示了從前端到后端都使用javascript來開發(fā)復雜的單頁Web應用，你的團隊能夠很容易地進行設計、測試、維護和擴展，不會受到某個框架的限制。期間你將會使用HTML5、CSS3和javascript的高級開發(fā)技能，Web服務器和數(shù)據(jù)庫的語言也是javascript。本書讀者需要具備基本的Web開發(fā)知識，但不要求具備單頁Web應用的相關開發(fā)經(jīng)驗。要下載本書的代碼可以登錄manning.com/SinglePageWebApplications。
目 錄
第一部分 單頁應用簡介
第1章 第一個單頁應用 3
目 錄
第一部分 單頁應用簡介
第1章 第一個單頁應用 3
1.1 定義、一些歷史和一些關注點 4
1.1.1 一些歷史 4
1.1.2 是什么導致JavaScript單頁應用姍姍來遲 5
1.1.3 我們的關注點 8
1.2 構建第一個單頁應用 9
1.2.1 定義目標 9
1.2.2 創(chuàng)建文件結構 10
1.2.3 使用Chrome開發(fā)者工具 10
1.2.4 開發(fā)HTML和CSS 11
1.2.5 添加JavaScript 12
1.2.6 使用Chrome開發(fā)者工具查看應用 17
1.3 精心編寫的單頁應用的用戶效益 19
1.4 小結 20
第2章 溫故JavaScript 22
2.1 變量作用域 24
2.2 變量提升 27
2.3 高級變量提升和執(zhí)行環(huán)境對象 28
2.3.1 提升 28
2.3.2 執(zhí)行環(huán)境和執(zhí)行環(huán)境對象 30
2.4 作用域鏈 33
2.5 JavaScript對象和原型鏈 35
2.6 函數(shù)——更深入的窺探 43
2.6.1 函數(shù)和匿名函數(shù) 43
2.6.2 自執(zhí)行匿名函數(shù) 44
2.6.3 模塊模式——將私有變量引入JavaScript 46
2.6.4 閉包 51
2.7 小結 54
第二部分 單頁應用客戶端
第3章 開發(fā)Shell 57
3.1 深刻理解Shell 57
3.2 創(chuàng)建文件和名字空間 59
3.2.1 創(chuàng)建文件結構 59
3.2.2 編寫應用的HTML文件 60
3.2.3 創(chuàng)建CSS根名字空間 61
3.2.4 創(chuàng)建JavaScript根名字空間 62
3.3 創(chuàng)建功能容器 64
3.3.1 選取策略 64
3.3.2 編寫Shell的HTML 64
3.3.3 編寫Shell的CSS 65
3.4 渲染功能容器 68
3.4.1 將HTML轉換為JavaScript 68
3.4.2 在JavaScript中添加HTML模板 69
3.4.3 編寫Shell的樣式表 71
3.4.4 指示應用使用Shell 73
3.5 管理功能容器 74
3.5.1 編寫展開或收起聊天滑塊的方法 74
3.5.2 給聊天滑塊添加點擊事件處理程序 76
3.6 管理應用狀態(tài) 80
3.6.1 理解瀏覽器用戶所期望的行為 80
3.6.2 選取一個策略來管理歷史控件 81
3.6.3 當發(fā)生歷史事件時，更改錨 82
3.6.4 使用錨來驅動應用狀態(tài) 83
3.7 小結 89
第4章 添加功能模塊 90
4.1 功能模塊策略 91
4.1.1 與第三方模塊的比較 91
4.1.2 功能模塊和分形MVC模式 93
4.2 創(chuàng)建功能模塊文件 96
4.2.1 規(guī)劃文件結構 96
4.2.2 填寫文件 97
4.2.3 我們創(chuàng)建了什么 103
4.3 設計方法API 103
4.3.1 錨接口模式 104
4.3.2 Chat的配置API 105
4.3.3 Chat的初始化API 106
4.3.4 Chat的setSliderPosition API 107
4.3.5 配置和初始化的級聯(lián) 107
4.4 實現(xiàn)功能API 109
4.4.1 樣式表 110
4.4.2 修改Chat 114
4.4.3 清理Shell 120
4.4.4 詳細解釋執(zhí)行的過程 125
4.5 添加經(jīng)常使用的方法 127
4.5.1 removeSlider方法 127
4.5.2 handleResize方法 129
4.6 小結 133
第5章 構建Model 134
5.1 理解Model 135
5.1.1 我們將要構建什么 135
5.1.2 Model做什么 137
5.1.3 Model不做什么 137
5.2 創(chuàng)建Model和其他文件 138
5.2.1 規(guī)劃文件結構 138
5.2.2 填充文件 139
5.2.3 使用統(tǒng)一的觸摸——鼠標庫 145
5.3 設計people對象 145
5.3.1 設計person對象 146
5.3.2 設計people對象的API 147
5.3.3 給people對象的API編寫文檔 150
5.4 構建people對象 151
5.4.1 創(chuàng)建偽造的人員列表 152
5.4.2 開始構建people對象 154
5.4.3 完成people對象的構建 157
5.4.4 測試people對象的API 164
5.5 在Shell中開啟登入和登出的功能 166
5.5.1 設計用戶登入的體驗 167
5.5.2 更新Shell的JavaScript 167
5.5.3 更新Shell的樣式表 169
5.5.4 使用UI測試登入和登出 170
5.6 小結 171
第6章 完成Model和Data模塊 172
6.1 設計chat對象 172
6.1.1 設計方法和事件 173
6.1.2 給chat對象的API添加文檔 175
6.2 構建chat對象 177
6.2.1 先創(chuàng)建chat對象的join方法 177
6.2.2 更新Fake以響應chat.join 179
6.2.3 測試chat.join方法 181
6.2.4 給chat對象添加消息傳輸功能 182
6.2.5 更新Fake，模擬消息傳輸功能 187
6.2.6 測試chat的消息傳輸功能 189
6.3 給Model添加Avatar功能 190
6.3.1 給chat對象添加Avatar功能 190
6.3.2 修改Fake來模擬頭像功能 191
6.3.3 測試頭像功能 192
6.3.4 測試驅動開發(fā) 193
6.4 完成Chat功能模塊 195
6.4.1 更新Chat的JavaScript 196
6.4.2 更新樣式表 203
6.4.3 測試Chat UI 207
6.5 創(chuàng)建Avatar功能模塊 208
6.5.1 創(chuàng)建Avatar的JavaScript 209
6.5.2 創(chuàng)建Avatar的樣式表 213
6.5.3 更新Shell和瀏覽文檔 214
6.5.4 測試Avatar功能模塊 215
6.6 數(shù)據(jù)綁定和jQuery 216
6.7 創(chuàng)建Data模塊 217
6.8 小結 220
第三部分 單頁應用服務器
第7章 Web服務器 223
7.1 服務器的作用 223
7.1.1 認證和授權 224
7.1.2 驗證 224
7.1.3 數(shù)據(jù)的保存和同步 225
7.2 Node.js 225
7.2.1 為什么選擇Node.js 225
7.2.2 使用Node.js創(chuàng)建‘Hello World’應用 226
7.2.3 安裝并使用Connect 229
7.2.4 添加Connect中間件 230
7.2.5 安裝并使用Express 231
7.2.6 添加Express中間件 234
7.2.7 Express的使用環(huán)境 235
7.2.8 Express的靜態(tài)文件服務 236
7.3 高級路由 237
7.3.1 用戶對象的CRUD路由 237
7.3.2 通用CRUD路由 243
7.3.3 把路由放到單獨的Node.js模塊里面 246
7.4 添加認證和授權 249
7.5 Web socket和Socket.IO 251
7.5.1 簡單的Socket.IO應用程序 251
7.5.2 Socket.IO和消息服務器 254
7.5.3 使用Socket.IO更新JavaScript 255
7.6 小結 258
第8章 服務器數(shù)據(jù)庫 259
8.1 數(shù)據(jù)庫的作用 259
8.1.1 選擇數(shù)據(jù)存儲 260
8.1.2 消除數(shù)據(jù)轉換 260
8.1.3 把邏輯放在需要的地方 261
8.2 MongoDB簡介 262
8.2.1 面向文檔的存儲 262
8.2.2 動態(tài)文檔結構 262
8.2.3 開始使用MongoDB 263
8.3 使用MongoDB驅動程序 264
8.3.1 準備項目文件 265
8.3.2 安裝并連接MongoDB 265
8.3.3 使用MongoDB的CRUD方法 267
8.3.4 向服務器應用添加CRUD操作 270
8.4 驗證客戶端數(shù)據(jù) 274
8.4.1 驗證對象類型 274
8.4.2 驗證對象 276
8.5 創(chuàng)建單獨的CRUD模塊 283
8.5.1 組織文件結構 284
8.5.2 把CRUD移到它自己的模塊里面 287
8.6 構建chat模塊 292
8.6.1 開始創(chuàng)建chat模塊 293
8.6.2 創(chuàng)建adduser消息處理程序 295
8.6.3 創(chuàng)建updatechat消息處理程序 299
8.6.4 創(chuàng)建disconnect消息處理程序 301
8.6.5 創(chuàng)建updateavatar消息處理程序 302
8.7 小結 305
第9章 單頁應用發(fā)布準備 306
9.1 單頁應用針對搜索引擎的優(yōu)化 307
9.2 云和第三方服務 310
9.2.1 站點分析 310
9.2.2 記錄客戶端錯誤 312
9.2.3 內(nèi)容分發(fā)網(wǎng)絡 314
9.3 緩存和緩存破壞 314
9.3.1 緩存時機 315
9.3.2 Web存儲 316
9.3.3 HTTP緩存 317
9.3.4 服務器緩存 320
9.3.5 數(shù)據(jù)庫查詢緩存 325
9.4 小結 326
附錄A JavaScript編碼標準 328
附錄B 測試單頁應用 361
書單推薦
