單頁Web應用JavaScript從前端到後端

第一部分 單頁應用簡介

第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 創建文件結構 10
1.2.3 使用Chrome開發者工具 10
1.2.4 開發HTML和CSS 11
1.2.5 添加JavaScript 12
1.2.6 使用Chrome開發者工具查看應用 17
1.3 精心編寫的單頁應用的用戶效益 19
1.4 小結 20

第2章 溫故JavaScript 22
2.1 變量作用域 24
2.2 變量提升 27
2.3 高級變量提升和執行環境對象 28
2.3.1 提升 28
2.3.2 執行環境和執行環境對象 30
2.4 作用域鏈 33
2.5 JavaScript對象和原型鏈 35
2.6 函數——更深入的窺探 43
2.6.1 函數和匿名函數 43
2.6.2 自執行匿名函數 44
2.6.3 模塊模式——將私有變量引入JavaScript 46
2.6.4 閉包 51
2.7 小結 54

第二部分 單頁應用客戶端

第3章 開發Shell 57
3.1 深刻理解Shell 57
3.2 創建文件和名字空間 59
3.2.1 創建文件結構 59
3.2.2 編寫應用的HTML文件 60
3.2.3 創建CSS根名字空間 61
3.2.4 創建JavaScript根名字空間 62
3.3 創建功能容器 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 管理應用狀態 80
3.6.1 理解瀏覽器用戶所期望的行為 80
3.6.2 選取一個策略來管理歷史控件 81
3.6.3 當發生歷史事件時，更改錨 82
3.6.4 使用錨來驅動應用狀態 83
3.7 小結 89

第4章 添加功能模塊 90
4.1 功能模塊策略 91
4.1.1 與第三方模塊的比較 91
4.1.2 功能模塊和分形MVC模式 93
4.2 創建功能模塊文件 96
4.2.1 規划文件結構 96
4.2.2 填寫文件 97
4.2.3 我們創建了什麼 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 配置和初始化的級聯 107
4.4 實現功能API 109
4.4.1 樣式表 110
4.4.2 修改Chat 114
4.4.3 清理Shell 120
4.4.4 詳細解釋執行的過程 125
4.5 添加經常使用的方法 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 創建Model和其他文件 138
5.2.1 規划文件結構 138
5.2.2 填充文件 139
5.2.3 使用統一的觸摸——鼠標庫 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 創建偽造的人員列表 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 先創建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 測試驅動開發 193
6.4 完成Chat功能模塊 195
6.4.1 更新Chat的JavaScript 196
6.4.2 更新樣式表 203
6.4.3 測試Chat UI 207
6.5 創建Avatar功能模塊 208
6.5.1 創建Avatar的JavaScript 209
6.5.2 創建Avatar的樣式表 213
6.5.3 更新Shell和瀏覽文檔 214
6.5.4 測試Avatar功能模塊 215
6.6 數據綁定和jQuery 216
6.7 創建Data模塊 217
6.8 小結 220

第三部分 單頁應用服務器

第7章 Web服務器 223
7.1 服務器的作用 223
7.1.1 認證和授權 224
7.1.2 驗證 224
7.1.3 數據的保存和同步 225
7.2 Node.js 225
7.2.1 為什麼選擇Node.js 225
7.2.2 使用Node.js創建『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的使用環境 235
7.2.8 Express的靜態文件服務 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章 服務器數據庫 259
8.1 數據庫的作用 259
8.1.1 選擇數據存儲 260
8.1.2 消除數據轉換 260
8.1.3 把邏輯放在需要的地方 261
8.2 MongoDB簡介 262
8.2.1 面向文檔的存儲 262
8.2.2 動態文檔結構 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 驗證客戶端數據 274
8.4.1 驗證對象類型 274
8.4.2 驗證對象 276
8.5 創建單獨的CRUD模塊 283
8.5.1 組織文件結構 284
8.5.2 把CRUD移到它自己的模塊里面 287
8.6 構建chat模塊 292
8.6.1 開始創建chat模塊 293
8.6.2 創建adduser消息處理程序 295
8.6.3 創建updatechat消息處理程序 299
8.6.4 創建disconnect消息處理程序 301
8.6.5 創建updateavatar消息處理程序 302
8.7 小結 305

第9章 單頁應用發布准備 306
9.1 單頁應用針對搜索引擎的優化 307
9.2 雲和第三方服務 310
9.2.1 站點分析 310
9.2.2 記錄客戶端錯誤 312
9.2.3 內容分發網絡 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 數據庫查詢緩存 325
9.4 小結 326

附錄A JavaScript編碼標准 328
附錄B 測試單頁應用 361