SPA
我们先来看一下在百科上面的解释吧，emmmm，一般呢，我每次搜索一些不懂的词，都会习惯先去看百科里面的解释，反正我从来都不奢望能看懂，只是指望有个大概的框架的，哈哈~
“单页面应用（SPA：single-page application），就是只有一张Web页面的应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的web应用程序。” -- from 百度百科
“单页应用（英语：single-page application，缩写 SPA）是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，而非传统的从服务器重新加载整个新页面。这种方法避免了页面之间切换打断用户体验，使应用程序更像一个桌面应用程序。在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面。尽管可以用位置散列或HTML5历史API来提供应用程序中单独逻辑页面的感知和导航能力，但页面在过程中的任何时间点都不会重新加载，也不会将控制转移到其他页面。与单页应用的交互通常涉及到与网页伺服器后端的动态通信。” -- from 维基百科
是不是云里雾里？
What：SPA是什么？
**简单点，说话的方式简单点 **
整个 webapp 只有单个HTML文件，所有操作都在这张页面上完成，由 js 来按需加载 HTML、CSS 和 JS
多个HTML页面文件的幻觉呢，都是通过 js 来操作 dom 节点来动态实现的（所以跳转到一个新页面实质上就是，删除本页面 dom 节点，新增新页面 dom 节点。从这里呢引出了一个虚拟 dom 的概念，这个以后会说到的）
不同页面之间的跳转幻觉呢，也是通过 js 控制 hash 或者 history api（go、back） 来进行路由 （这就是一个更加明确前后端分离的卖点了）
最后通过 ajax 拉取数据实现响应功能
特点：
速度：更好的用户体验，让用户在 webapp 感受到 native app 的速度和流畅
MVVM：经典的 MVVM 开发模式，，前后端各负其责
ajax：业务逻辑全部都在本地操作，数据都需要通过 ajax 同步提交
路由：在 URL 中采用 # 号来作为当前视图的地址（/#/），改变 # 号后的参数来载入不同的页面片段。（页面并不会重载！）
优点：
分离前后端关注点，前端负责界面显示，包括页面跳转逻辑；后端则只负责数据管理（存储和计算），各司其职，不会把前后端的逻辑混杂在一起。
减轻服务器的压力，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力提高好几倍。
同一套后端程序代码/接口，可以多处复用，不仅是同一个应用不用修改就可以用于web界面、手机、平板等多种客户端，同时也可以复用在不同应用上。
缺点：
SEO问题：对 SEO 不友好，但是可以通过 Prerender 等技术解决一部分
前进、后退、地址栏等，需要程序进行管理
书签，需要程序来进行控制
Why：为什么要用SPA？
SPA 与 MPA 的对比：
单页应用程序（SPA） 多页应用程序（MPA）
SPA如图 :
MPA如图 :
应用组成 一个外壳页面和多个页面片段组成 由多个完整页面构成
跳转方式 片段跳转：把一个页面片段删除或者隐藏，加载另一个页面片段并显示出来。这是片段之间的模拟跳转，并没有离开壳页面 页面跳转：从一个页面跳转到另一个页面
URL模式
/index.html#page1
/index.html#page2
/page1.html
/page2.html
刷新方式 页面片段局部刷新 整页刷新
跳转后公共资源是否重载 否 是
页面间传递数据 因为在一个页面上，所以可以设置全局常量来记录这些固定的数据，所以页面片段传递数据很容易实现 依赖 URL, cookie, localStorage,实现麻烦
页面切换转场画面 容易实现 无法实现
用户体验 页面片段间切换快，转场画面佳，用户体验好，包括在移动设备上 页面间切换加载慢，不流畅，用户体验差，特别是在移动设备上
SEO 需要单独方案做，有点麻烦 可以直接做
特别适用范围 对体验要求高的应用，特别是移动应用 需要对搜索引擎友好的网站
开发难度 高一些，MVVM 模式框架 低一些，框架选择容易
维护成本 相对容易 相对复杂
How：怎么实现 SPA ？
MVVM框架： 诸如 AngularJS、Vue.js、React、Ember.js、Meteor.js、ExtJS 等面向网页浏览器的 JavaScript 框架采纳了单页应用（SPA）原则。
目前听到最多的还是前面的三大框架：Angular、Vue 和 React。
