《SPA設計與架構》之認識SPA

原文

　　簡書原文：https://www.jianshu.com/p/84323f530223

大綱

　　前言
　　一、什麼是單頁面應用程序（SPA）
　　二、SPA與傳統Web應用的區別
　　三、關於SPA的使用
　　四、SPA的相關知識
　　五、服務器端通訊
　　六、單元測試
　　七、認識自動化工具

前言

　　本篇博客以及以後的幾篇關於SPA的博客是本人閱讀過《SPA設計與架構》以後整理的知識，而且針對一些知識點也查找了相關博客，對其有必定的瞭解。而我也將我對SPA的認識和理解寫出來，但願對讀者能有所幫助。若是有想要深刻了解關於SPA的設計理念的話，我的推薦能夠去將整本書通讀一下，這樣會對如今的流行的框架有進一步的認識和理解。

一、什麼是單頁面應用程序（SPA）

　　一、SPA是一種Web開發方法，整個應用功能都存在於單個頁面中。
　　二、在SPA應用中，應用加載以後就不會再有整頁刷新。相反，展現邏輯預先加載，並有賴於內容Region（區域）中的視圖切換來展現內容。
　　三、SPA客戶端與服務器端實行異步通訊。經常使用的數據通訊格式爲JSON文本格式。
　　四、MV*框架提供機制，讓SPA應用綁定服務器端請求數據與視圖（用戶所見並與之交互）。
　　五、與依賴全局變量和函數不一樣的是，SPA中的JavaScript代碼經過模塊來組織。模塊提供了狀態和/或數據封裝。模塊還有助於代碼解耦及維護。
　　六、SPA的優點還包括類桌面應用的呈現效果、解耦的表現層、更快速輕量的符合、更少的用戶等待時間以及更好的代碼維護性等。

二、SPA與傳統Web應用的區別

　　SPA：無需刷新瀏覽器，將須要操做的DOM的變化放在瀏覽器中，若是頁面須要變化的時候，由操做這些變化的JavaScript（已經加載於瀏覽器中的）來實現操做。
SPA實現的視圖的刷新，是局部子容器（Region）的變化，而不是頁面的從新加載，無重載頁面是單頁面應用程序的關鍵
　　一、無需刷新瀏覽器
　　二、表現邏輯位於客戶端
　　三、服務器端事務處理

三、關於SPA的使用

3.一、使用模塊模式

　　利用模塊模式限制變量和函數做用域爲模塊自身。避開全局做用域相關的各類陷阱。
　　模塊模式結合其餘相關技術管理模塊以及其依賴的可行方式，使得程序員可以藉助頁面構架方法來設計大型、健壯的Web應用程序。

3.二、SPA的路由選擇

　　爲了讓用戶掌握其導航位置，單頁面應用程序一般會在設計中融入路由選擇（Routing）的設計思路：接觸MV*框架或第三方庫的代碼實現，將URL風格的路徑與功能關聯起來。路徑一般看起來像相對URL，其充當用戶導航時到達特定視圖的觸發因素。路由器能夠動態更新瀏覽器URL，並容許用戶使用前進和後退按鈕。這就進一步強化了當屏幕某部分變化時會到達新位置的設計理念。

3.三、SPA建立視圖組成與佈局

　　在單頁面應用程序中，UI由視圖而非新頁面構成。內容Region的建立以及視圖在這些Region中的位置，決定了應用程序的佈局。客戶端路由因爲鏈接這些點。全部的這些要素有機結合起來就影響了應用程序的可用性和美感。

3.四、利用MV*框架實現SPA架構

　　一、SPA是一種架構理念，是不一樣於傳統Web實現的一種架構。傳統式的Web架構是前端交互，經過請求服務器獲取處理好的新的HTML文件從而進行頁面的重載刷新，而SPA式的Web架構設計是用戶體驗傾向於原生軟件開發式的，是讓用戶決定咱們用的就是一個原生開發式的程序應用，可是這個程序應用又不像軟件同樣須要下載，須要不斷的更新，他就只是一個頁面，經過路由器、AJAX等技術實現這樣的用戶體驗的架構設計。
　　二、SPA只是一種架構理念，是想要達到的某種Web應用的體驗。最終實現這樣的程序應用須要用到的技術有不少，諸如路由器、AJAX、客戶端自動化等等的技術。
　　三、MV框架就是集成了各類能夠實現SPA架構理念的技術的程序集合，這些集合又體現了傳統的MVC、MVP、MVVM等設計模式，可是又不侷限於某種設計模式，是多種設計模式的集合體，所以咱們稱之爲MV框架。

四、SPA的相關知識

4.一、MV*框架

　　基於SPA架構理念，不少框架應運而生，這些框架不一樣程度上的支持了傳統的MVC、MVP、MVVM等設計模式，經過各類不一樣的技術，如路由器、AJAX實現了SPA架構理念的程序應用，而這些設計模式的框架能夠統稱爲MV*框架。

4.二、路由器

　　傳統Web應用中，每次刷新頁面都是經過請求服務器，獲取處處理好的HTML頁面，進而刷新重載當前HTML頁面。每次的URL的變化都會致使請求的發送，從而刷新頁面，實現展現新的頁面，顯示新的功能的效果。
　　可是區別於傳統Web應用，SPA架構理念的Web應用是不該該給人以頁面跳轉的那種效果的，URL的變化雖然一樣會發送請求，可是請求的就再也不是整個HTML的頁面，HTML頁面的變化應該是由本地已經加載好的JS來實現的，而發送的請求只是爲了數據的加載。
　　這樣的URL的變化不一樣於傳統的URL變化以後產生的影響，所以須要經過路由器這樣的技術實現，從而從傳統的URL路由向客戶端路由轉變，從而實現單頁面導航的效果

4.三、模塊化編程

　　也許在MV*框架中的不少知識並非SPA架構理念應用的實現的最本質的技術，可是經過這些技術能夠更好的實現SPA架構理念的Web應用，而模塊化編程即是其中之一。
　　經過模塊化編程，可讓整個Web應用變成一個又一個功能模塊，經過功能模塊的調用從而實現某個視圖的需求。經過URL的變化從而得知須要展現的視圖，不一樣的視圖調用不一樣的模塊從而達到功能的實現，這就是模塊化編程的意義，編寫一個個功能模塊，經過路由器的控制，進而經過js實現頁面的變化，經過調用模塊實現功能。

4.四、服務器端通訊

　　基於異步加載數據的服務器端通訊是實現SPA架構理念的Web應用重點之一，由於若是沒有異步的實現，加載數據時程序應用停滯，那麼給用戶的體驗就不可能和所謂原生的無縫對接相相似了

4.五、單元測試

　　單元測試是實現代碼更優化的實現途徑之一，經過單元測試能夠將一些bug扼殺在最初的時候，避免以後代碼功能實現，可是又因爲bug的出現而不得不修改某塊單元代碼，進而又影響到整個功能塊從而不得不重構整個代碼

4.六、客戶端自動化

　　客戶端自動化能夠簡便程序開發中不少繁雜的工做，讓開發更像一個工程的開發，更智能，更快捷

五、服務器端通訊

　　服務器端通訊的數據類型——互聯網媒體類型
　　爲了SPA應用客戶端與服務器端間可以通訊，兩端都須要有可以對上話的共同語言。首要任務就是決定發送與接收數據的類型
　　JSON是SPA應用程序與服務器端通訊時的經常使用格式(儘管數據類型能夠是從純文本到XML、文件的各類格式)
　　儘管使用JSON格式文本做爲通用數據交換格式，但它只不過是系統原生對象的表述形式。要讓文本能爲我所用，兩端都須要對其進行轉換。
　　調用服務器端時，請求能夠包括合適的互聯網媒體類型(Internet Media Type,MIME)相關信息，由於資源可用於各類語言及媒體類型。以後服務端就能夠相應其認爲最合適的某個版本的請求資源。這叫作內容協商(Content Negotiation)。對於JSON，能夠爲數據交換顯示聲明一種application/json的互聯網媒體類型。

六、單元測試

　　從廣義上來講，單元測試指在應用程序的最小可測部分上執行測試。此類測試是在開發階段由開發人員執行的低層次測試。此外，無論測試主體是MV*對象仍是一個普通模塊，單元測試一般都會對代碼行爲方式進行斷言。
　　單元測試還能夠經過它與其餘類型測試的關係來表述。按照諸如範圍、時間及規模的度量，一般用一個金字塔結構來描述不一樣測試類型。因爲單元測試的關注點和範圍較窄、可以快速執行並易於管理，並且可以快速反饋結果，所以其處於金字塔底層。

七、認識自動化工具

 　　在軟件開發中，常常會發現本身再整個開發週期裏不斷重複某些任務。這些任務包括針對給定語言執行特定開發步驟、運行測試以及建立構建過程等。爲了實現這些任務的自動化，許多基於任務的自動化工具（或Task Runner）紛紛涌現。　　在現代Web應用程序中，如咱們的SPA應用程序，JavaScript專業人員須要的不只僅是一個構建工具。當代開發人員面臨的現實至關繁雜，同時要求Task Runner可以自動化面向開發的大量任務。