SPA設計與架構：理解單頁面Web套用

《SPA設計與架構：理解單頁面Web套用》一書原作者Emmit A. Scott（埃米頓·A.斯科特，中文版由盧俊祥譯，電子工業出版社2016年11月出版

基本介紹

• 書名：SPA設計與架構：理解單頁面Web套用
• 作者：【美】Emmit A. Scott（埃米頓·A.斯科特）
• 譯者：盧俊祥
• ISBN：978-7-121-30091-2
• 頁數：304
• 定價：79.00
• 出版時間：2016年11月
• 開本：16開

內容提要

SPA 開發技術的運用是當今Web 開發領域的熱門趨勢，但真正全面掌握該技術的開發者並不多。本書詳盡闡述單頁面Web 套用（SPA）開發技術，從SPA 構建基礎入手，通過MV*、模組化編程、路由、模組間通信、伺服器端互動等概念的闡述，全面介紹SPA 的設計與架構，幫助讀者正確掌握SPA 開發的各方面知識要素。同時，《SPA設計與架構：理解單頁面Web套用》中還討論了SPA 的單元測試及客戶端任務自動化，覆蓋了從開發到部署的一系列任務，讓讀者在閱讀完《SPA設計與架構：理解單頁面Web套用》之後能夠打下紮實的SPA 開發基礎。

《SPA設計與架構：理解單頁面Web套用》的重點是幫助讀者正確、全面地掌握SPA 開發概念，這些概念都是通用的。但為了讓內容更全面、具體，《SPA設計與架構：理解單頁面Web套用》將通過Knockout、Backbone.js 及AngularJS 這三種不同風格的MV* 框架來進行比較性討論，這是本書的一大特色。同時在涉及具體MV* 框架知識點時，《SPA設計與架構：理解單頁面Web套用》中會提供相應介紹。書中示例豐富具體，並提供完整原始碼下載。

《SPA設計與架構：理解單頁面Web套用》適合前端及對SPA 技術感興趣的開發者閱讀。讀者只需掌握JavaScript、HTML 和CSS 基本知識，就可以閱讀。

目錄

第1 部分基礎知識1

1　單頁面應用程式介紹3

1.1 SPA 簡述4

1.1.1 無須刷新瀏覽器7

1.1.2 表現邏輯位於客戶端7

1.1.3 伺服器端事務處理7

1.2 更進一步8

1.2.1 以Shell 頁面開始8

1.2.2 從傳統頁面到視圖9

1.2.3 視圖的產生10

1.2.4 實現無刷新的視圖切換11

1.2.5 貫穿動態更新過程的流暢性12

1.3 SPA 套用相較傳統Web 套用的優勢12

1.4 溫故知新13

1.5 優秀SPA 套用的構成15

1.5.1 組織項目15

1.5.2 創建可維護的松耦合UI 17

1.5.3 使用JavaScript 模組18

1.5.4 執行SPA 導航19

1.5.5 創建視圖組成與布局19

1.5.6 模組通信20

1.5.7 與伺服器端通信20

1.5.8 執行單元測試20

1.5.9 客戶端自動化技術20

1.6 小結21

2　MV* 框架介紹22

2.1 MV* 概念24

2.1.1 傳統UI 設計模式25

2.1.2 MV* 和瀏覽器環境27

2.2 MV* 基礎概念28

2.2.1 框架29

2.2.2 我們的MV* 項目30

2.2.3 模型32

2.2.4 綁定36

2.2.5 模板40

2.2.6 視圖44

2.3 為什麼要用MV* 框架44

2.3.1 關注分離45

2.3.2 簡化日常任務46

2.3.3 提升生產率47

2.3.4 標準化47

2.3.5 可擴展性48

2.4 框架選擇48

2.5 挑戰環節50

2.6 小結50

3　JavaScript 模組化52

3.1 模組概念53

3.1.1 模組模式概念53

3.1.2 模組結構54

3.1.3 揭示模式55

3.2 模組化編程的意義56

3.2.1 避免命名衝突56

3.2.2 保護代碼完整性65

3.2.3 隱藏複雜性67

3.2.4 降低代碼改變帶來的衝擊68

3.2.5 代碼組織68

3.2.6 模組模式的不足69

3.3 模組模式剖析69

3.3.1 可訪問性控制69

3.3.2 創建公有API 70

3.3.3 允許全局導入73

3.3.4 創建模組的命名空間73

3.4 模組載入及依賴管理74

3.4.1 腳本載入器74

3.4.2 異步模組定義——AMD 75

3.4.3 通過RequireJS 實踐AMD 76

3.5 挑戰環節81

3.6 小結81

第2 部分　核心概念83

4　單頁面導航85

4.1 客戶端路由器概念86

4.1.1 傳統導航86

4.1.2 SPA 導航86

4.2 路由及其配置88

4.2.1 路由語法90

4.2.2 路由配置項90

4.2.3 路由參數91

4.2.4 預設路由93

4.3 客戶端路由器的工作機制93

4.3.1 片段標識符方式94

4.3.2 HTML5 歷史API 方式95

4.3.3 使用HTML5 歷史API 方式97

4.4 綜合實作：實現SPA 路由98

4.4.1 教員列表（預設路由）99

4.4.2 主要聯繫人路由101

4.4.3 教員授課時間（參數化路由）102

4.5 挑戰環節104

4.6 小結105

5　視圖合成與布局106

5.1 項目介紹107

5.2 布局設計概念108

5.2.1 視圖108

5.2.2 Region 109

5.2.3 視圖合成110

5.2.4 嵌套視圖111

5.2.5 路由112

5.3 高級合成與布局的可選方案113

5.3.1 優點113

5.3.2 缺點114

5.4 設計應用程式114

5.4.1 設計基本布局115

5.4.2 設計基本內容117

5.4.3 在複雜設計中套用視圖管理122

5.4.4 通過自身狀態創建嵌套視圖125

5.5 挑戰環節127

5.6 小結128

6　模組間互動129

6.1 模組概念回顧131

6.1.1 用模組封裝代碼131

6.1.2 API 提供對內部功能的訪問控制133

6.1.3 SRP——以單一目的作為設計出發點134

6.1.4 代碼重用——控制項目規模135

6.2 模組間互動方式136

6.2.1 通過依賴進行模組間互動136

6.2.2 依賴方式的優缺點138

6.2.3 通過發布/ 訂閱模式進行模組間互動138

6.2.4 發布/ 訂閱模式優缺點141

6.3 示例項目細節142

6.3.1 搜尋功能144

6.3.2 顯示產品信息150

6.4 挑戰環節155

6.5 小結155

7　與伺服器端通信156

7.1 示例項目新要求157

7.2 與伺服器端通信綜述158

7.2.1 選擇數據類型158

7.2.2 HTTP 請求方法159

7.2.3 數據轉換160

7.3 使用MV* 框架161

7.3.1 請求生成162

7.3.2 通過回調函式處理結果165

7.3.3 通過Promise 處理結果166

7.3.4 Promise 錯誤處理170

7.4 RESTful Web 服務調用172

7.4.1 什麼是REST 172

7.4.2 REST 原則172

7.4.3 MV* 框架的RESTful 支持174

7.5 示例項目細節174

7.5.1 配置REST 調用174

7.5.2 添加產品到購物車177

7.5.3 查看購物車179

7.5.4 修改購物車181

7.5.5 從購物車中移除產品183

7.6 挑戰環節184

7.7 小結184

8　單元測試186

8.1 示例項目說明187

8.2 什麼是單元測試187

8.2.1 單元測試的好處188

8.2.2 構建更好的單元測試189

8.3 傳統的單元測試192

8.3.1 QUnit 起步193

8.3.2 創建第一個單元測試196

8.3.3 測試由MV* 對象創建的代碼200

8.3.4 測試對DOM 所做的改變205

8.3.5 混合使用其他測試框架206

8.4 挑戰環節208

8.5 小結208

9　客戶端任務自動化209

9.1 Task Runner 的常見用途210

9.1.1 即時刷新瀏覽器210

9.1.2 自動化JavaScript 和CSS 的預處理過程211

9.1.3 自動化Linter 代碼分析211

9.1.4 持續單元測試211

9.1.5 檔案串接212

9.1.6 代碼壓縮212

9.1.7 持續集成212

9.2 Task Runner 選擇212

9.3 本章示例項目213

9.3.1 Gulp.js 介紹214

9.3.2 創建第一個任務215

9.3.3 創建代碼分析任務216

9.3.4 創建瀏覽器刷新任務218

9.3.5 自動化單元測試220

9.3.6 創建構建過程222

9.4 挑戰環節227

9.5 小結227

A　員工通訊錄示例說明229

B　XMLHttpRequest API 259

C　第7 章內容的伺服器端設定與總結266

D　安裝Node.js 與Gulp.js 277