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

內容描述

＜內容簡介＞
單頁的Web應用程序（SPA）是網絡軟件發展的下一階段，SPA能夠使瀏覽器應用像原生桌面應用一樣流暢易用。開發SPA需要新的開發理念，並掌握那些支持更複雜應用的新技術。幸運的是，學習如何創建SPA並不需要十分豐富的經驗！本書能夠幫助開發者從傳統的網頁應用開發過渡到SPA的開發。本書首先介紹了SPA模式，及建立創建鏈接頁面的標準方法。然後簡單介紹了模塊化JavaScript編程，包括AMD和模塊加載器。本書將指導讀者學習SPA架構的各個方面，包括MV框架、單元測試、路由、佈局管理、數據訪問、發布/訂閱、性能和安全性。配套的示例很容易上手，且可被應用於讀者自己的庫或框架中。
＜章節目錄＞
第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