第一部分單頁應用簡介

第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和CSS11
1．2．5添加JavaScript12
1．2．6使用Chrome開發者工具查看應用17
1．3精心編寫的單頁應用的用戶效益19
1．4小結20

第2章溫故JavaScript22
2．1變量作用域24
2．2變量提升27
2．3高級變量提升和執行環境對像28
2．3．1提升28
2．3．2執行環境和執行環境對像30
2．4作用域鏈33
2．5JavaScript對像和原型鏈35
2．6函數——更深入的窺探43
2．6．1函數和匿名函數43
2．6．2自執行匿名函數44
2．6．3模塊模式——將私有變量引入JavaScript46
2．6．4閉包51
2．7小結54

第二部分單頁應用客戶端

第3章開發Shell57
3．1深刻理解Shell57
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的HTML64
3．3．3編寫Shell的CSS65
3．4渲染功能容器68
3．4．1將HTML轉換為JavaScript68
3．4．2在JavaScript中添加HTML模板69
3．4．3編寫Shell的樣式表71
3．4．4指示應用使用Shell73
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設計方法API103
4．3．1錨接口模式104
4．3．2Chat的配置API105
4．3．3Chat的初始化API106
4．3．4Chat的setSliderPosition API107
4．3．5配置和初始化的級聯107
4．4實現功能API109
4．4．1樣式表110
4．4．2修改Chat114
4．4．3清理Shell120
4．4．4詳細解釋執行的過程125
4．5添加經常使用的方法127
4．5．1removeSlider方法127
4．5．2handleResize方法129
4．6小結133

第5章構建Model134
5．1理解Model135
5．1．1我們將要構建什麼135
5．1．2Model做什麼137
5．1．3Model不做什麼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對像的API147
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對像的API164
5．5在Shell中開啟登入和登出的功能166
5．5．1設計用戶登入的體驗167
5．5．2更新Shell的JavaScript167
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．join179
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的JavaScript196
6．4．2更新樣式表203
6．4．3測試Chat UI207
6．5創建Avatar功能模塊208
6．5．1創建Avatar的JavaScript209
6．5．2創建Avatar的樣式表213
6．5．3更新Shell和瀏覽文檔214
6．5．4測試Avatar功能模塊215
6．6數據綁定和jQuery216
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．2Node．js225
7．2．1為什麼選擇Node．js225
7．2．2使用Node．js創建‘Hello World’應用226
7．2．3安裝並使用Connect229
7．2．4添加Connect中間件230
7．2．5安裝並使用Express231
7．2．6添加Express中間件234
7．2．7Express的使用環境235
7．2．8Express的靜態文件服務236
7．3高級路由237
7．3．1用戶對像的CRUD路由237
7．3．2通用CRUD路由243
7．3．3把路由放到單獨的Node．js模塊裡面246
7．4添加認證和授權249
7．5Web socket和Socket．IO251
7．5．1簡單的Socket．IO應用程序251
7．5．2Socket．IO和消息服務器254
7．5．3使用Socket．IO更新JavaScript255
7．6小結258

第8章服務器數據庫259
8．1數據庫的作用259
8．1．1選擇數據存儲260
8．1．2消除數據轉換260
8．1．3把邏輯放在需要的地方261
8．2MongoDB簡介262
8．2．1面向文檔的存儲262
8．2．2動態文檔結構262
8．2．3開始使用MongoDB263
8．3使用MongoDB驅動程序264
8．3．1準備項目文件265
8．3．2安裝並連接MongoDB265
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．2Web存儲316
9．3．3HTTP緩存317
9．3．4服務器緩存320
9．3．5數據庫查詢緩存325
9．4小結326

附錄AJavaScript編碼標準328
附錄B測試單頁應用361