單頁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程序的出現是富客戶端發展的必然結果,但是該技術也是有着些局限性,所以采用之前需要了解清楚它的優缺點。
優點:
- 良好的交互體驗
用戶不需要重新刷新頁面,獲取數據也是通過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請求引發的深度解析》一文,這里就不再闡述了。
參考:
http://msdn.microsoft.com/zh-cn/magazine/cc507641.aspx
http://www.ibm.com/developerworks/cn/web/1302_xiaohh_onepagedojo/
http://www.ietf.org/rfc/rfc1738.txt