如果你的網(wǎng)站還是一系列跳轉(zhuǎn)頁面，那就落伍了。單頁Web應(yīng)用（single page web application，SPA）是你接下來的選擇：將用戶界面渲染和業(yè)務(wù)邏輯放在瀏覽器端，只在同步數(shù)據(jù)的時候才和服務(wù)器通信，它們可以提供流暢的用戶體驗，就像本地應(yīng)用程序一樣。不過，單頁Web應(yīng)用的開發(fā)、管理和測試有很大的挑戰(zhàn)。本書展示了從前端到后端都使用javascript來開發(fā)復(fù)雜的單頁Web應(yīng)用，你的團隊能夠很容易地進行設(shè)計、測試、維護和擴展，不會受到某個框架的限制。期間你將會使用HTML5、CSS3和javascript的高級開發(fā)技能，Web服務(wù)器和數(shù)據(jù)庫的語言也是javascript。本書讀者需要具備基本的Web開發(fā)知識，但不要求具備單頁Web應(yīng)用的相關(guān)開發(fā)經(jīng)驗。 如果你的網(wǎng)站還是一系列跳轉(zhuǎn)頁面，那就落伍了。單頁Web應(yīng)用（single page web application，SPA）是你接下來的選擇：將用戶界面渲染和業(yè)務(wù)邏輯放在瀏覽器端，只在同步數(shù)據(jù)的時候才和服務(wù)器通信，它們可以提供流暢的用戶體驗，就像本地應(yīng)用程序一樣。不過，單頁Web應(yīng)用的開發(fā)、管理和測試有很大的挑戰(zhàn)。本書展示了從前端到后端都使用javascript來開發(fā)復(fù)雜的單頁Web應(yīng)用，你的團隊能夠很容易地進行設(shè)計、測試、維護和擴展，不會受到某個框架的限制。期間你將會使用HTML5、CSS3和javascript的高級開發(fā)技能，Web服務(wù)器和數(shù)據(jù)庫的語言也是javascript。本書讀者需要具備基本的Web開發(fā)知識，但不要求具備單頁Web應(yīng)用的相關(guān)開發(fā)經(jīng)驗。要下載本書的代碼可以登錄manning.com/SinglePageWebApplications。
目 錄
第一部分 單頁應(yīng)用簡介
第1章 第一個單頁應(yīng)用 3
目 錄
第一部分 單頁應(yīng)用簡介
第1章 第一個單頁應(yīng)用 3
1.1 定義、一些歷史和一些關(guān)注點 4
1.1.1 一些歷史 4
1.1.2 是什么導(dǎo)致JavaScript單頁應(yīng)用姍姍來遲 5
1.1.3 我們的關(guān)注點 8
1.2 構(gòu)建第一個單頁應(yīng)用 9
1.2.1 定義目標(biāo) 9
1.2.2 創(chuàng)建文件結(jié)構(gòu) 10
1.2.3 使用Chrome開發(fā)者工具 10
1.2.4 開發(fā)HTML和CSS 11
1.2.5 添加JavaScript 12
1.2.6 使用Chrome開發(fā)者工具查看應(yīng)用 17
1.3 精心編寫的單頁應(yīng)用的用戶效益 19
1.4 小結(jié) 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 小結(jié) 54
第二部分 單頁應(yīng)用客戶端
第3章 開發(fā)Shell 57
3.1 深刻理解Shell 57
3.2 創(chuàng)建文件和名字空間 59
3.2.1 創(chuàng)建文件結(jié)構(gòu) 59
3.2.2 編寫應(yīng)用的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轉(zhuǎn)換為JavaScript 68
3.4.2 在JavaScript中添加HTML模板 69
3.4.3 編寫Shell的樣式表 71
3.4.4 指示應(yīng)用使用Shell 73
3.5 管理功能容器 74
3.5.1 編寫展開或收起聊天滑塊的方法 74
3.5.2 給聊天滑塊添加點擊事件處理程序 76
3.6 管理應(yīng)用狀態(tài) 80
3.6.1 理解瀏覽器用戶所期望的行為 80
3.6.2 選取一個策略來管理歷史控件 81
3.6.3 當(dāng)發(fā)生歷史事件時，更改錨 82
3.6.4 使用錨來驅(qū)動應(yīng)用狀態(tài) 83
3.7 小結(jié) 89
第4章 添加功能模塊 90
4.1 功能模塊策略 91
4.1.1 與第三方模塊的比較 91
4.1.2 功能模塊和分形MVC模式 93
4.2 創(chuàng)建功能模塊文件 96
4.2.1 規(guī)劃文件結(jié)構(gòu) 96
4.2.2 填寫文件 97
4.2.3 我們創(chuàng)建了什么 103
4.3 設(shè)計方法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 詳細(xì)解釋執(zhí)行的過程 125
4.5 添加經(jīng)常使用的方法 127
4.5.1 removeSlider方法 127
4.5.2 handleResize方法 129
4.6 小結(jié) 133
第5章 構(gòu)建Model 134
5.1 理解Model 135
5.1.1 我們將要構(gòu)建什么 135
5.1.2 Model做什么 137
5.1.3 Model不做什么 137
5.2 創(chuàng)建Model和其他文件 138
5.2.1 規(guī)劃文件結(jié)構(gòu) 138
5.2.2 填充文件 139
5.2.3 使用統(tǒng)一的觸摸——鼠標(biāo)庫 145
5.3 設(shè)計people對象 145
5.3.1 設(shè)計person對象 146
5.3.2 設(shè)計people對象的API 147
5.3.3 給people對象的API編寫文檔 150
5.4 構(gòu)建people對象 151
5.4.1 創(chuàng)建偽造的人員列表 152
5.4.2 開始構(gòu)建people對象 154
5.4.3 完成people對象的構(gòu)建 157
5.4.4 測試people對象的API 164
5.5 在Shell中開啟登入和登出的功能 166
5.5.1 設(shè)計用戶登入的體驗 167
5.5.2 更新Shell的JavaScript 167
5.5.3 更新Shell的樣式表 169
5.5.4 使用UI測試登入和登出 170
5.6 小結(jié) 171
第6章 完成Model和Data模塊 172
6.1 設(shè)計chat對象 172
6.1.1 設(shè)計方法和事件 173
6.1.2 給chat對象的API添加文檔 175
6.2 構(gòu)建chat對象 177
6.2.1 先創(chuàng)建chat對象的join方法 177
6.2.2 更新Fake以響應(yīng)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 測試驅(qū)動開發(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 小結(jié) 220
第三部分 單頁應(yīng)用服務(wù)器
第7章 Web服務(wù)器 223
7.1 服務(wù)器的作用 223
7.1.1 認(rèn)證和授權(quán) 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’應(yīng)用 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)文件服務(wù) 236
7.3 高級路由 237
7.3.1 用戶對象的CRUD路由 237
7.3.2 通用CRUD路由 243
7.3.3 把路由放到單獨的Node.js模塊里面 246
7.4 添加認(rèn)證和授權(quán) 249
7.5 Web socket和Socket.IO 251
7.5.1 簡單的Socket.IO應(yīng)用程序 251
7.5.2 Socket.IO和消息服務(wù)器 254
7.5.3 使用Socket.IO更新JavaScript 255
7.6 小結(jié) 258
第8章 服務(wù)器數(shù)據(jù)庫 259
8.1 數(shù)據(jù)庫的作用 259
8.1.1 選擇數(shù)據(jù)存儲 260
8.1.2 消除數(shù)據(jù)轉(zhuǎn)換 260
8.1.3 把邏輯放在需要的地方 261
8.2 MongoDB簡介 262
8.2.1 面向文檔的存儲 262
8.2.2 動態(tài)文檔結(jié)構(gòu) 262
8.2.3 開始使用MongoDB 263
8.3 使用MongoDB驅(qū)動程序 264
8.3.1 準(zhǔn)備項目文件 265
8.3.2 安裝并連接MongoDB 265
8.3.3 使用MongoDB的CRUD方法 267
8.3.4 向服務(wù)器應(yīng)用添加CRUD操作 270
8.4 驗證客戶端數(shù)據(jù) 274
8.4.1 驗證對象類型 274
8.4.2 驗證對象 276
8.5 創(chuàng)建單獨的CRUD模塊 283
8.5.1 組織文件結(jié)構(gòu) 284
8.5.2 把CRUD移到它自己的模塊里面 287
8.6 構(gòu)建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 小結(jié) 305
第9章 單頁應(yīng)用發(fā)布準(zhǔn)備 306
9.1 單頁應(yīng)用針對搜索引擎的優(yōu)化 307
9.2 云和第三方服務(wù) 310
9.2.1 站點分析 310
9.2.2 記錄客戶端錯誤 312
9.2.3 內(nèi)容分發(fā)網(wǎng)絡(luò) 314
9.3 緩存和緩存破壞 314
9.3.1 緩存時機 315
9.3.2 Web存儲 316
9.3.3 HTTP緩存 317
9.3.4 服務(wù)器緩存 320
9.3.5 數(shù)據(jù)庫查詢緩存 325
9.4 小結(jié) 326
附錄A JavaScript編碼標(biāo)準(zhǔn) 328
附錄B 測試單頁應(yīng)用 361
書單推薦
