Single Page Application

single page web application，SPA，就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

 

单页 Web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。 ^[1]    浏览器一开始会加载必需的HTML、CSS和JavaScript，全部的操做都在这张页面上完成，都由JavaScript来控制。所以，对单页应用来讲模块化的开发和设计显得至关重要。

特色

编辑

速度：更好的用户体验，让用户在web app感觉native app的速度和流畅，

·MVC：经典MVC开发模式，先后端各负其责。

·ajax：重前端，业务逻辑所有在本地操做，数据都须要经过AJAX同步、提交。

·路由：在URL中采用#号来做为当前视图的地址,改变#号后的参数，页面并不会重载。

单页Web应用（single page web application，SPA）是当今网站开发技术的弄潮儿，不少传统网站都在或者已经转型为单页Web应用，新的单页Web应用网站（包括移动平台上的）也如雨后春笋般涌如今人们的面前，如Gmail、Evernote、Trello等。若是你是一名Web开发人员，却还没开发过或者甚至是没有据说过单页应用，那你已经Out好久了。

单页Web应用和前端工程师们息息相关，由于主要的变革发生在浏览器端，用到的技术其实仍是HTML+CSS+JavaScript，全部的浏览器都原生支持，固然有的浏览器由于具有一些高级特性，从而使得单页Web应用的用户体验更上一层楼。关于单页应用的优势和缺点，网上讲解的文章有不少，这里就不展开论述了。 单页Web应用，顾名思义，就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript，以后全部的操做都在这张页面上完成，这一切都由JavaScript来控制。所以，单页Web应用会包含大量的JavaScript代码，复杂度可想而知，模块化开发和设计的重要性不言而喻。 ^[2]  

单页web应用开发流程

编辑

• 用循环的视角审视Web应用开发
• 框定一个一致的SPA图形用户界面（GUI）和模型
• 将SPA的原则带回服务器端
• 汇集于对合适的应用进行早期SPA开发 ^[3]  

SPA协调的起点是认识到SPA与脚本和网页编程有关，而不是与后端应用有关。SPA的主要目标是围绕着Web 2.0页面时间交互原则重构Web应用，以便体验可容易地转化到多个设备中，并对用户有效。这意味着首先要抱着支持这样一个逻辑活动为目标来设计用户交互，该活动应该涉及单页面与一套脚本，实现一次加载并执行直到活动完成。

一旦用户交互设计完成，下一步就是框定一个本地状态或事件模型，该模型应能描述页面处理与用户的交互及与任何后端应用交互。尽管这并不是不可能，可是开发与服务器端功能多组件交互的SPA会更加困难。

这会产生一种要对应用服务器进行重构的诱因，其目的是为了以1:1的比例来支持SPA。就最大程度上而言，该模型应该让本身的变量及命名空间本地化，并经过应用的服务器端与其余SPA交互。这是为了减小对于用本地SPA控制器或模型来在多个SPA之间保留状态的需求。 ^[3]

 

注意几个网站的相同点，那就是在浏览器中，作了原先“应当”在客户端作的事情。它们的界面切换很是流畅，响应很迅速，跟传统的网页明显不同，它们是什么呢？这就是单页Web应用。

所谓单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，全部的业务功能都是它的子模块，经过特定的方式挂接到主界面上。它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，所以能造就与桌面程序媲美的流畅用户体验。

 

并非全部的项目都适合spa

1. 你的应用须要被搜索引擎索引吗？ 据我所知，目前全部的搜索引擎仍是比较讨厌JavaScript的，也就是说你页面里面用ajax更新的动态内容搜索引擎是不能访问到的。因此若是你的网站须要依靠搜索引擎进行推广，仍是传统一点比较好。

2. 你的应用须要浏览器的后退按钮吗？几乎全部的浏览器用户天天都在频繁的使用浏览器的后退按钮来查看本身刚刚浏览过的内容，可是若是你使用了AJAX进行局部刷新，浏览过的内容就不能用后退按钮重现了。目前我所知道的只有GWT使用了iframe的方法实现了后退按钮的功能：

    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' ></iframe>，不过没有研究它的具体解决方法。

　　众所周知，Ajax能够实现页面的无刷新操做——优势；可是，也会形成另外的问题，没法前进与后退！曾几什么时候，Gmail彷佛借助iframe搞定，现在，HTML5让事情变得如同过家家般简单。

当执行Ajax操做的时候，往浏览器history中塞入一个地址（使用pushState）（这是无刷新的）；因而，返回的时候，经过URL或其余传参，咱们就能够还原到Ajax以前的模样。

本demo所展现的就是ajax的内容载入与地址栏的前进与后退，典型应用，对于熟悉相关知识点颇有帮助。

http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/

3. 你的应用想要用户收藏某个页面吗？AJAX单页应用的特色就是地址栏的url跟浏览器显示内容不是一一对应的关系，因此用户收藏的页面从新打开的时候显示的内容跟收藏时的内容多是不同的。

4. 你的应用页面很复杂吗？须要用ajax进行复杂页面的更新吗？ ajax是使用xml, text等文本与服务端进行交互的，大量的传输不但影响系统的性能，对系统安全是也很大的威胁。

 

 

http://www.cnblogs.com/ppforever/p/5126640.html

http://www.cnblogs.com/ppforever/p/5126640.html

http://blog.csdn.net/jinhuiyu/article/details/4738719