浏览:

SPA-单页Web应用

1.什么是SPA?

SPA是英文的缩写,全称是Single Page Application,即单页Web应用。

SPA:

1.SPA是一种介绍特殊web应用的理念 (是什么)
2.SPA可以提供最贴近于Native应用的用户体验 (干什么)
3.SPA可以用在:(在哪用)

a.跨平台的浏览器内核(webkit)的页面
(如:微信页面、Native App页面(手机QQ里面的QQ空间))
b.用web技术开发类似Native应用的App
(如:Telkomsel Moovigo,馋口街,爱班级)
c.机顶盒里的页面(拥有webkit内核)
(如:华为Digice项目)


2.详细介绍SPA

详细说明SPA到底是个什么东西,看过几个前端研发写的博客,他们都有不同的理解:
子凡:

单页Web应用是一种特殊的Web应用。它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、JavaScript和CSS。一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转。
取而代之的是利用JavaScript动态的变换HTML的内容,从而实现UI与用户的交互。由于避免了页面的重新加载,SPA可以提供较为流畅的用户体验。

民工精髓:

所谓单页应用,指的是在一个页面上集成多种功能,甚至整个系统就只有一个页面,所有的业务功能都是它的子模块,通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华,把AJAX的无刷新机制发挥到极致,因此能造就与桌面程序媲美的流畅用户体验。
其实单页应用我们并不陌生,很多人写过ExtJS的项目,用它实现的系统,很天然的就已经是单页的了,也有人用jQuery或者其他框架实现过类似的东西。用各种JS框架,甚至不用框架,都是可以实现单页应用的,它只是一种理念。有些框架适用于开发这种系统,如果使用它们,可以得到很多便利。

伯乐:

单页面应用是仅包含单个网页的应用,目的是为了提供类似于本地应用的流畅用户体验。

大熊君:

所谓的单页面结构就是指多个页面间切换时,不刷新当前整个页面,更新页面展示数据,并且相应地改变地址栏中的url,以使用户可以分享这个url。

再说说我的理解:

单页应用就是通过一个主入口获取应用大部分资源,使用路由机制实现页面跳转的应用。


3.SPA的实际例子

因为手机的浏览器内核是个残废,所以单页Web应用主要用在移动端。但不是说单页Web应用在PC端就不可用使用,PC的浏览器内核健壮性强得没话说,如果再加上SPA技术的话,页面交互那更是棒棒的!
使用SPA的网站有:
CODING:https://coding.net/pp
Teambition:https://bbs.teambition.com
阿里云控制台:https://home.console.aliyun.com
百度云:http://yun.baidu.com
QQ空间:https://mobile.qzone.qq.com
YoloSong:http://music.uodoo.com
Huntnews:http://huntnews.in

使用SPA的手机App、机顶盒TV App有:
爱班级、馋口街、Telkomsel Moovigo、Digice TV


4.SPA的优缺点

优点:

  1. 良好的交互体验
    前端进行的是局部渲染,避免了不必要的跳转和重复渲染。
  2. 前后端职责分离,架构清晰
    前端进行交互逻辑,后端负责数据处理。
    前后端可以单独开发、单独测试。
  3. 减轻服务器压力
    服务器只用出数据就可以,不用管展示逻辑和页面合成。

缺点:

  1. 初次加载耗时多
    为实现单页Web应用功能及显示效果,需要在加载页面的时候将JavaScript、CSS统一加载,部分页面可以在需要的时候加载。
  2. 前进后退路由管理
    由于单页Web应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理。
  3. 页面模板化和区分代码逻辑
    由于单页Web应用在一个页面,当单页Web应用规模增大,页面会越来越多,我们需要将页面模板化;业务会越来越多,我们需要根据业务区分代码逻辑。
  4. SEO难度较大
    单页Web应用因为只有一个页面主入口,所以很难被搜索引擎收录。

其实上面说到的前三个问题都已经得到了解决,唯独最后一个还未找到解决方案。
因为单页Web应用最根本的缺陷就是不利于SEO,因为界面的绝大部分都是动态生成的,所以搜索引擎很不容易索引它。


5.解决SPA的缺点

a.初次加载耗时多
可以使用模块化框架,按需加载资源。
如:使用SeaJS、RequireJS

b.前进后退路由管理
可以使用原生H5 History API。
如:window.history.replaceState和window.history.pushState

可以使用支持路由管理的集合框架。

补充:

深入说明就是如果用“location.href”实现页面来回跳转会出现资源重复获取、文件重新解析、javascript重新执行、css重新渲染等问题。
使用路由机制则不会出现该问题。

c.页面模板化和区分代码逻辑
需要引入MV*框架,它们的基本思路都是在JS层创建模块分层和通信机制。
这类框架包括Ember.js,Backbone.js,Angular.js,Avalon.js、Vue.js等。


6.完整SPA项目

张鑫旭写的mobilebone
自述:mobile移动端,PC桌面端页面无刷新过场JS骨架,简单、专注!

赵达写的spa
自述:SPA是为构建WebApp设计的路由控制和视图转换框架。

dolymood的mobile-router
自述:轻量级web端单页面骨架。

onlyurei的knockout-spa
自述:用Knockout做个的SPA。


7.SPA总结

最后总结下单页Web应用,SPA的出现最主要的目的是提升交互体验
难道使用了SPA就一定能提升交互体验吗?
带着这个问题,我对SPA的讲解就结束啦,谢谢!

附上参考资源:
资源一:单页面应用SPA架构
资源二:构建单页Web应用