如果你的網(wǎng)站還是一系列跳轉(zhuǎn)頁(yè)面，那就落伍了。單頁(yè)Web應(yīng)用（single page web application，SPA）是你接下來(lái)的選擇：將用戶界面渲染和業(yè)務(wù)邏輯放在瀏覽器端，只在同步數(shù)據(jù)的時(shí)候才和服務(wù)器通信，它們可以提供流暢的用戶體驗(yàn)，就像本地應(yīng)用程序一樣。不過，單頁(yè)Web應(yīng)用的開發(fā)、管理和測(cè)試有很大的挑戰(zhàn)。本書展示了從前端到后端都使用javascript來(lái)開發(fā)復(fù)雜的單頁(yè)Web應(yīng)用，你的團(tuán)隊(duì)能夠很容易地進(jìn)行設(shè)計(jì)、測(cè)試、維護(hù)和擴(kuò)展，不會(huì)受到某個(gè)框架的限制。期間你將會(huì)使用HTML5、CSS3和javascript的高級(jí)開發(fā)技能，Web服務(wù)器和數(shù)據(jù)庫(kù)的語(yǔ)言也是javascript。本書讀者需要具備基本的Web開發(fā)知識(shí)，但不要求具備單頁(yè)Web應(yīng)用的相關(guān)開發(fā)經(jīng)驗(yàn)。 如果你的網(wǎng)站還是一系列跳轉(zhuǎn)頁(yè)面，那就落伍了。單頁(yè)Web應(yīng)用（single page web application，SPA）是你接下來(lái)的選擇：將用戶界面渲染和業(yè)務(wù)邏輯放在瀏覽器端，只在同步數(shù)據(jù)的時(shí)候才和服務(wù)器通信，它們可以提供流暢的用戶體驗(yàn)，就像本地應(yīng)用程序一樣。不過，單頁(yè)Web應(yīng)用的開發(fā)、管理和測(cè)試有很大的挑戰(zhàn)。本書展示了從前端到后端都使用javascript來(lái)開發(fā)復(fù)雜的單頁(yè)Web應(yīng)用，你的團(tuán)隊(duì)能夠很容易地進(jìn)行設(shè)計(jì)、測(cè)試、維護(hù)和擴(kuò)展，不會(huì)受到某個(gè)框架的限制。期間你將會(huì)使用HTML5、CSS3和javascript的高級(jí)開發(fā)技能，Web服務(wù)器和數(shù)據(jù)庫(kù)的語(yǔ)言也是javascript。本書讀者需要具備基本的Web開發(fā)知識(shí)，但不要求具備單頁(yè)Web應(yīng)用的相關(guān)開發(fā)經(jīng)驗(yàn)。要下載本書的代碼可以登錄manning.com/SinglePageWebApplications。
目 錄
第一部分 單頁(yè)應(yīng)用簡(jiǎn)介
第1章 第一個(gè)單頁(yè)應(yīng)用 3
目 錄
第一部分 單頁(yè)應(yīng)用簡(jiǎn)介
第1章 第一個(gè)單頁(yè)應(yīng)用 3
1.1 定義、一些歷史和一些關(guān)注點(diǎn) 4
1.1.1 一些歷史 4
1.1.2 是什么導(dǎo)致JavaScript單頁(yè)應(yīng)用姍姍來(lái)遲 5
1.1.3 我們的關(guān)注點(diǎn) 8
1.2 構(gòu)建第一個(gè)單頁(yè)應(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è)應(yīng)用的用戶效益 19
1.4 小結(jié) 20
第2章 溫故JavaScript 22
2.1 變量作用域 24
2.2 變量提升 27
2.3 高級(jí)變量提升和執(zhí)行環(huán)境對(duì)象 28
2.3.1 提升 28
2.3.2 執(zhí)行環(huán)境和執(zhí)行環(huán)境對(duì)象 30
2.4 作用域鏈 33
2.5 JavaScript對(duì)象和原型鏈 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è)應(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 給聊天滑塊添加點(diǎn)擊事件處理程序 76
3.6 管理應(yīng)用狀態(tài) 80
3.6.1 理解瀏覽器用戶所期望的行為 80
3.6.2 選取一個(gè)策略來(lái)管理歷史控件 81
3.6.3 當(dāng)發(fā)生歷史事件時(shí)，更改錨 82
3.6.4 使用錨來(lái)驅(qū)動(dòng)應(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è)計(jì)方法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 配置和初始化的級(jí)聯(lián) 107
4.4 實(shí)現(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)庫(kù) 145
5.3 設(shè)計(jì)people對(duì)象 145
5.3.1 設(shè)計(jì)person對(duì)象 146
5.3.2 設(shè)計(jì)people對(duì)象的API 147
5.3.3 給people對(duì)象的API編寫文檔 150
5.4 構(gòu)建people對(duì)象 151
5.4.1 創(chuàng)建偽造的人員列表 152
5.4.2 開始構(gòu)建people對(duì)象 154
5.4.3 完成people對(duì)象的構(gòu)建 157
5.4.4 測(cè)試people對(duì)象的API 164
5.5 在Shell中開啟登入和登出的功能 166
5.5.1 設(shè)計(jì)用戶登入的體驗(yàn) 167
5.5.2 更新Shell的JavaScript 167
5.5.3 更新Shell的樣式表 169
5.5.4 使用UI測(cè)試登入和登出 170
5.6 小結(jié) 171
第6章 完成Model和Data模塊 172
6.1 設(shè)計(jì)chat對(duì)象 172
6.1.1 設(shè)計(jì)方法和事件 173
6.1.2 給chat對(duì)象的API添加文檔 175
6.2 構(gòu)建chat對(duì)象 177
6.2.1 先創(chuàng)建chat對(duì)象的join方法 177
6.2.2 更新Fake以響應(yīng)chat.join 179
6.2.3 測(cè)試chat.join方法 181
6.2.4 給chat對(duì)象添加消息傳輸功能 182
6.2.5 更新Fake，模擬消息傳輸功能 187
6.2.6 測(cè)試chat的消息傳輸功能 189
6.3 給Model添加Avatar功能 190
6.3.1 給chat對(duì)象添加Avatar功能 190
6.3.2 修改Fake來(lái)模擬頭像功能 191
6.3.3 測(cè)試頭像功能 192
6.3.4 測(cè)試驅(qū)動(dòng)開發(fā) 193
6.4 完成Chat功能模塊 195
6.4.1 更新Chat的JavaScript 196
6.4.2 更新樣式表 203
6.4.3 測(cè)試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 測(cè)試Avatar功能模塊 215
6.6 數(shù)據(jù)綁定和jQuery 216
6.7 創(chuàng)建Data模塊 217
6.8 小結(jié) 220
第三部分 單頁(yè)應(yīng)用服務(wù)器
第7章 Web服務(wù)器 223
7.1 服務(wù)器的作用 223
7.1.1 認(rèn)證和授權(quán) 224
7.1.2 驗(yàn)證 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 高級(jí)路由 237
7.3.1 用戶對(duì)象的CRUD路由 237
7.3.2 通用CRUD路由 243
7.3.3 把路由放到單獨(dú)的Node.js模塊里面 246
7.4 添加認(rèn)證和授權(quán) 249
7.5 Web socket和Socket.IO 251
7.5.1 簡(jiǎn)單的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ù)庫(kù) 259
8.1 數(shù)據(jù)庫(kù)的作用 259
8.1.1 選擇數(shù)據(jù)存儲(chǔ) 260
8.1.2 消除數(shù)據(jù)轉(zhuǎn)換 260
8.1.3 把邏輯放在需要的地方 261
8.2 MongoDB簡(jiǎn)介 262
8.2.1 面向文檔的存儲(chǔ) 262
8.2.2 動(dòng)態(tài)文檔結(jié)構(gòu) 262
8.2.3 開始使用MongoDB 263
8.3 使用MongoDB驅(qū)動(dòng)程序 264
8.3.1 準(zhǔn)備項(xiàng)目文件 265
8.3.2 安裝并連接MongoDB 265
8.3.3 使用MongoDB的CRUD方法 267
8.3.4 向服務(wù)器應(yīng)用添加CRUD操作 270
8.4 驗(yàn)證客戶端數(shù)據(jù) 274
8.4.1 驗(yàn)證對(duì)象類型 274
8.4.2 驗(yàn)證對(duì)象 276
8.5 創(chuàng)建單獨(dú)的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è)應(yīng)用發(fā)布準(zhǔn)備 306
9.1 單頁(yè)應(yīng)用針對(duì)搜索引擎的優(yōu)化 307
9.2 云和第三方服務(wù) 310
9.2.1 站點(diǎn)分析 310
9.2.2 記錄客戶端錯(cuò)誤 312
9.2.3 內(nèi)容分發(fā)網(wǎng)絡(luò) 314
9.3 緩存和緩存破壞 314
9.3.1 緩存時(shí)機(jī) 315
9.3.2 Web存儲(chǔ) 316
9.3.3 HTTP緩存 317
9.3.4 服務(wù)器緩存 320
9.3.5 數(shù)據(jù)庫(kù)查詢緩存 325
9.4 小結(jié) 326
附錄A JavaScript編碼標(biāo)準(zhǔn) 328
附錄B 測(cè)試單頁(yè)應(yīng)用 361
書單推薦
