论单页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

posted @ 2014-05-27 11:55  swzhou  阅读(4673)  评论(3编辑  收藏  举报