編輯推薦

　　Web應用發展的下一個熱點是單頁麵Web應用程序，其將原生桌麵應用的流暢體驗帶到瞭瀏覽器。如果你打算從傳統Web應用跨越到SPA卻又無從下手，那麼這本書正是為你準備的。本書講述SPA應用程序構建所需的設計與開發技術。書中首先介紹SPA模型，並闡述SPA標準構建方式。隨著內容的展開，作者通過具體的SPA構建知識點引導你前進，涵蓋MV*框架、單元測試、路由、布局管理、數據訪問、發布/訂閱模式以及客戶端任務自動化等內容。書中示例豐富易懂，並可結閤各種第三方庫或框架來創建。內容包括：

　　√ 模塊化JavaScript實踐

　　√ 理解MV*框架

　　√ 布局管理

　　√ 客戶端任務自動化

　　√ SPA應用程序測試

內容簡介

　　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 基本知識，就可以閱讀。

作者簡介

　　Emmit A. Scott 是一名有17 年Web 應用構建經驗的高級軟件工程師和架構師。他為教育、銀行和通信領域開發過大型應用程序。他的愛好包括閱讀（特彆喜歡Jim Butcher的小說）、吉他（想當年他可是一位搖滾樂手）以及盡可能多陪陪孩子。

　　譯者簡介

　　盧俊祥

　　譯者，書迷；關注Web 技術趨勢，熱衷App 開發、Web 開發、數據分析、架構設計以及各類編程語言；陳氏太極拳五十六式愛好者；佛禪人生，緣散緣聚。

目錄

第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

前言/序言

　　譯者序

　　當第一次使用Gmail 時，我被它那流暢的原生桌麵般體驗迷倒，贊嘆天底下居然有如此令人驚艷的Web 應用。之後，SPA 的概念逐漸盛行，越來越多關於SPA的介紹、實踐分享進入開發者的眼簾。然而，在現實開發世界裏，我發現很多開發者對SPA 開發技術的整體概念是模糊的，往往以為隻需靠Ajax 技術，就能很好地實現SPA。

　　在我大緻瀏覽瞭本書的內容後，立刻感受到這是一本非常不錯的SPA 開發書籍。事實上，這本書在Amazon 網站中獲得瞭非常不錯的讀者評價。在翻譯過程中，我自己也強化瞭不少SPA 開發概念，並受益匪淺。

　　Web 前端開發技術可謂是當今變化最為頻繁的軟件開發技術，新的開發理念、新的框架層齣不窮，同時ES 6 在語法上帶來瞭諸多變化，這些都迫使我們不斷去適應新趨勢的發展。但本書著力於SPA 開發技術的基本原理。掌握瞭這些基礎知識，就能夠做到相當程度的以不變應萬變，這也是本書吸引我的地方。

　　歲月如梭，能夠沉浸在技術創造的樂趣中是一件讓我無限期待的事情。編寫齣優美的代碼，構建齣極緻的應用，是每個熱愛創造的開發者共同的追求目標。真心期待本書能夠帶給你不一樣的收獲。

　　同時，林長瑞、吳桐、硃建寶、周榮華、吳勝華、葉銘輝、李禧強、姚建峰、鄭秀玲亦不同程度地參與瞭本書的翻譯工作。

　　感謝我的妻子和娃，你們給瞭我很大的支持，小寶貝還給我帶來瞭許許多多的樂趣。同時還要感謝本書的策劃編輯張春雨，在你的鼓勵下，我的翻譯過程充滿愉悅。

　　盧俊祥

　　2016 年10 月

　　序

　　1991 年的時候，Tim Berners-Lee 推齣瞭全球首個網站，這個網站運行在一個他命名為“WorldWideWeb”的程序上。兩年後，他發布瞭WorldWideWeb 的源代碼，世界從此發生瞭天翻地覆的變化。迄今仍可在info.cern.ch 瀏覽人類曆史上的第一個

　　Web 頁麵。

　　自1991 年起，Web 得到瞭空前的發展。在它24 歲的時候，其仍是IT 世界裏使用最廣泛的技術。Web 以某種形式運行於各種操作係統、硬件平颱及絕大部分的移動設備之上。讓這一切成為可能的軟件就是萬能的Web 瀏覽器。

　　傳統上，Web 瀏覽器是簡單的中間人角色。其從服務器端獲取數據，展示數據，再將數據發迴服務器端，然後又獲取更多的數據並展示。而今天的Web 瀏覽器，雖仍堅守初心，但其復雜程度已遠非當年可預見。

　　當年簡陋的瀏覽器已經發展成為各式各樣應用程序的運行時成熟環境。無須安裝，就能隨處訪問、運行這些應用程序。這就是開發者的“屠龍技”。部署四處運行且即時更新的代碼庫——這種魅力實在是難以抗拒。還沒有其他任何一種技術能夠做到如此得意。

　　站在Web 平颱成功之巔的是無處不在的JavaScript——一門10 天內發明齣來的語言，它大概是目前世界上使用最廣泛的編程語言瞭。開發者們已經接納瞭JavaScript，它幫我們打開瞭嶄新應用類型的大門，之前做夢都想不到這一切會發生在Web 瀏覽器中。

　　這些新型應用程序，我們通常稱之為單頁麵應用程序（SPA），幾乎完全在瀏覽器中運行，其引入瞭一套全新的規則、模式及問題。Web 的廣泛吸引力帶來瞭層齣不窮的JavaScript 和CSS 框架；框架如此之多，以至於要做齣閤適的挑選猶如大海撈針。

　　親愛的讀者，這就是本書如此重要的原因。

　　在過去的4 年裏，我作為一名開發者在Telerik 工作，我積極倡導對Kendo UIJavaScript 庫的關注。我看到過太多的JavaScript 框架起起滅滅。當某個流行框架的炒作達到臨界狀態時，下一個“大事件” 就隨之而來，隻留下那些在所謂“時髦”框架之上實際構建解決方案的開發者們仍在收拾殘局。這讓我總想知道它何時能夠消停下來，這樣我們就能夠專注於“正確之道”，以構建新一代的富客戶端應用程序。

　　殘酷的現實卻是：做任何事情都不存在所謂的“正確之道”。唯一的辦法就是為你的項目和技能棧而戰。這是讓你更具生産力並最終成功的唯一姿勢。

　　為瞭在SPA 開發世界裏殺齣一條路，理解SPA 概念之下的基本原理是很有必要的。掌握一門框架還遠遠不夠，因為這樣的話，最終仍會讓你感到貧瘠和匱乏。深度理解成功SPA 構築之法的核心概念，使你得以從容決策，在藉助JavaScript 框架完成瞭80% 功能之後，懂得如何構建剩下的20%。

　　本書就是你的指導手冊——不管你是專傢還是新人。在讀它的時候，我發現自己在惡補過往不求甚解的基礎，並對之前感覺甚好而實際上隻是部分理解（甚至理解錯誤）的術語有瞭新認識。這些認識和解釋埋藏在理論結閤實踐的字裏行間，並在討論SPA 框架的時候教你如何構建SPA、正麵處理現實世界需求。

　　那些我通常持懷疑態度的書籍，都試圖解釋跟SPA 一樣大的概念，但是這部書籍的亮點卻在於——另闢蹊徑設法將復雜主題化解為易於理解與消化的部分。

　　我毫無保留地傾力推薦這本書——每一頁，每一句。

　　Burke Holland

　　Telerik 開發者關係主管

寫的很有條理，讓我搞懂瞭很多概念性的問題，是一本非常不錯的書，推薦！

道理講的不錯，但一結閤實際代碼(上麵提到的框架代碼)，就有點濛。

博文視點的書，品質不錯！

好書，不錯。還沒去看，現在買的書也多

好書，進階必讀經典，推薦一個

此用戶未及時評價，係統默認好評。

強烈推薦的書

東西還不錯吧

不錯。對單頁麵的講解比較透徹