论单页Web应用和RESTful架构

听海——sky

单页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为POS
T，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请求引发的深度解析》一文，这
里就不再阐述了。

梦想家