认识单页面应用

coding
teambition
cloud9

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

---

一、什么是单页面应用

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。（使用js控制渲染来替换html跳转）

单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。

因此，对单页面应用来说，模块化的开发和设计显得相当重要。

原理：JS会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做，判断页面到底是显示哪个组件，清除不需要的，显示需要的组件。这种过程就是单页应用，每次跳转的时候不需要再请求html文件了。

二、SPA优缺点

单页面应用的优缺点：
优点：
1、用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。
2、适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。

缺点：
1、首页加载慢
单页面应用会将js、 css打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则用户体验不好
2、SEO不友好
SEO（Search Engine Optimization）为搜索引擎优化。它是一种利用搜索引擎的搜索规则来提高网站在搜索引擎排名的方法。目前各家搜索引擎对JS支持不好，所以使用单页面应用将大大减少搜索引擎对网站的收录。

三、单页面应用分类

1、Hash模式：（也就是通过锚点？）
这里的 hash 就是指 url 后的 # 号以及后面的字符。比如说 "www.baidu.com/#hashhash" ，其中 "#hashhash" 就是我们期望的 hash 值。
hash 值的变化不会导致浏览器像服务器发送请求，而且hash 的改变会触发 hashChange 事件，浏览器的前进后退也能对其进行控制，所以在 H5 的 history 模式出现之前，基本都是使用 hash 模式来实现前端路由。

2、History模式
在 HTML5 之前，浏览器就已经有了 history 对象。但在早期的 history 中只能用于多页面的跳转。

在 HTML5 的规范中，history 新增了以下几个 API：

history.pushState();         // 添加新的状态到历史状态栈
history.replaceState();      // 用新的状态代替当前状态
history.state                // 返回当前状态对象

history.pushState() 和 history.replaceState() 的区别?

history.pushState() 在保留现有历史记录的同时，将 url 加入到历史记录中。
history.replaceState() 会将历史记录中的当前页面历史替换为 url。
由于 history.pushState() 和 history.replaceState() 可以改变 url 同时，不会刷新页面，所以在 HTML5 中的 histroy 具备了实现前端路由的能力。

hash模式和history模式对比
1、hash 模式相比于 history 模式的优点：

兼容性更好，可以兼容到IE8
无需服务端配合处理非单页的url地址

2、hash 模式相比于 history 模式的缺点：

看起来更丑。
会导致锚点功能失效。
相同 hash 值不会触发动作将记录加入到历史栈中，而 pushState 则可以。

引用：
https://www.cnblogs.com/ppforever/p/5126640.html
https://www.jianshu.com/p/0c32c85c668b
https://juejin.im/post/5dac1d0d6fb9a04e0762e3f1