論單頁Web應用和RESTful架構

單頁Web應用

概述

單頁Web應用并不是突然誕生的一門新技術，而是web展示的一種新的嘗試。它将所有的動作局限于一個Web頁面，在加載站點首頁的時候就加載站點需要的JavaScript和CSS。單頁Web應用不會随着使用者的操作而重新加載頁面或者進行頁面跳轉，而是利用默默執行在後端的JavaScript動态的變換HTML内容，進而對使用者動作做出響應。單頁Web應用可以提供非常流暢的使用者體驗，并且在移動端Hybrid應用中有着Native應用的體驗。

原理

根據RFC 1738中對URL的描述，URL可以分解為protocol://domain/path:port?param#hash

即一個URL通常由協定，域名，路徑，端口，參數，散列組成。

其中如果更改其中的協定，域名，路徑，端口，參數都會引起頁面的重新加載，但是更新其中的散列值卻不會引起頁面的重新加載。以前頁面中的散列值通常作為定位頁面内容的瞄點，但是現在更進一步，散列可以作為切換頁面的憑證。通過監聽浏覽器url中散列值得變換，就可以切換到不同的頁面上去。

知識點

頁面渲染

一般來說進行一次有着以下流程：

是以不論對于用戶端還是服務端來說HTTP請求是需要有代價的，能省則省啊。單頁Web應用隻在第一次加載頁面時，發起頁面中資源的請求，後續都通過Ajax異步請求資料，在減少HTTP請求數量的同時也增強了使用者體驗。

頁面間傳值

在ASP.Net中有N多種頁面間傳值的方法，但是在單頁面應用程式中方法就相對少了很多。我推薦的是采用LocalStorage暫存頁面間參數，同時LocalStorage也可以存儲Ajax請求的參數和結果，這樣可以當做一種緩存來使用。

資料源

将頁面和數量分離出來，通過Ajax來擷取RESTful API提供的JSON資料。下文RESTful規約中會詳細讨論。

單頁Web應用優缺點

單頁Web程式的出現是富用戶端發展的必然結果，但是該技術也是有着些局限性，是以采用之前需要了解清楚它的優缺點。

優點：

1. 良好的互動體驗

　　使用者不需要重新重新整理頁面，擷取資料也是通過Ajax異步擷取，頁面顯示流暢。

　　2.　良好的前後端工作分離模式

　　單頁Web應用可以和RESTful規約一起使用，通過REST API提供接口資料，并使用Ajax異步擷取，這樣有助于分離用戶端和伺服器端工作。更進一步，可以在用戶端也可以分解為靜态頁面和頁面互動兩個部分。

缺點：

　　1.　SEO難度較高

　　由于所有的内容都在一個頁面中動态替換顯示，是以在SEO上其有着天然的弱勢，是以如果你的站點對SEO很看重，且要用單頁應用，那麼就做些靜态頁面給搜尋引擎用吧。

　　2.　前進、後退管理

　　由于單頁Web應用在一個頁面中顯示所有的内容，是以不能使用浏覽器的前進後退功能，所有的頁面切換需要自己建立堆棧管理。

　　3.　初次加載耗時多

　　為實作單頁Web應用功能及顯示效果，需要在加載頁面的時候将JavaScript、CSS統一加載，部分頁面可以在需要的時候加載。是以必須對JavaScript及CSS代碼進行合并壓縮處理，如果使用第三方庫，建議使用一些大公司的CDN。

RESTful架構

了解RESTful

RESTful的提出主要是為了統一個結構清晰、符合标準、易于了解、擴充友善的架構。其可以主要了解為“資源表現層狀态轉化”。資源一般具備“新增”、“修改”，“檢視”和“删除”是種狀态，對應于HTTP Method為POST，PUT，GET，DELETE。

總的來說RESTful架構中通過一個URI表示一個資源，通過不同的Method進行資源的操作。

例如聯系人資訊按RESTful架構設計URI如下：

擷取單個使用者下所有聯系人資訊： GET- ​​http://xxx/uid/contacts/​​

新增單個使用者下的某個聯系人資訊：POST- ​​http://xxx/uid/contacts/​​

擷取單個使用者下的某個聯系人資訊：GET- ​​http://xxx/uid/contacts/cid​​

修改單個使用者下的某個聯系人資訊：PUT- ​​http://xxx/uid/contacts/cid​​

删除單個使用者下的某個聯系人資訊：DELETE- ​​http://xxx/uid/contacts/cid​​

CORS(跨域請求資源)

采用RESTful架構可以為不同的平台提供資源資訊，但是如果是以公開此資源讓第三方站點引用的話，就會存在跨域的問題。對于跨域通路RESTful接口請參考之前寫的《​​一個Option請求引發的深度解析​​》一文，這裡就不再闡述了。