論單頁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請求引發的深度解析》一文,這里就不再闡述了。

 

參考:

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

http://lovenblog.com/ued-2/276/

http://www.ruanyifeng.com/blog/2011/09/restful.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM