【前端词典】单页应用 VS 多页应用

前言

最近看到一些人在问单页面和多页面应用的区别。因为最近在整理 Vue 相关的内容，所以也就输出这一篇短文希望可以给你一个整体的认识。

这里也会大体介绍单页应用实现的核心 —— 前端路由。

单页应用 VS 多页应用

直观对比图

单页应用（SinglePage Application，SPA）

指只有一个主页面的应用，一开始只需加载一次 js,css 等相关资源。所有的内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅刷新局部资源。

多页应用（MultiPage Application，MPA）

指有多个独立的页面的应用，每个页面必须重复加载 js,css 等相关资源。多页应用跳转，需要整页资源刷新。

两者对比表格：

单页应用实现 —— 前端路由

前端路由的核心：改变视图的同时不会向后端发出请求。

这里我讲讲 vue-router 路由的两种模式： hash&history

hash 模式

hash 模式背后的原理是 onhashchange 事件。

window.addEventListener('hashchange',function(e) { 
    console.log(e.oldURL); 
    console.log(e.newURL) 
},false);

通过 window.location.hash 属性获取和设置 hash 值。

由于 hash 发生变化的 url 都会被浏览器记录下来，所以浏览器的前进后退可以使用，尽管浏览器没有请求服务器，但是页面状态和 url 关联起来。后来人们称其为前端路由，成为单页应用标配。

hash 模式的特点在于 hash 出现在 url 中，但是不会被包括在 HTTP 请求中，对后端没有影响，不会重新加载页面。

history 模式

利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState()，它们提供了对历史记录进行修改的功能。

相关的 API:

history.pushState()

history.pushState(stateObj, title, url);

1. state：一个与指定网址相关的状态对象， popstate 事件触发时，该对象会传入回调函数。如果不需要可填 null。
2. title：新页面的标题，但是所有浏览器目前都忽略这个值，可填 null。
3. url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

例如： history.pushState('new','new','new.html');

添加上面这个新记录后，浏览器地址栏立刻显示 ~/new.html，但并不会跳转到 new.html，它只是成为 history 中的最新记录。 pushState 方法不会触发页面刷新，只是 history 对象变化，地址栏会变。

history.replaceState()

history.replaceState(stateObj, title, url);

参数同 pushState() 一样。

调用该方法，会修改当前的 history 对象记录， history.length 的长度不会改变

history.state

当前 URL 下对应的状态信息。如果当前 URL 不是通过 pushState 或者 replaceState 产生的，那么 history.state是 null。 当需要 state 和 URL 同步时可以使用 replaceState() 使之同步。

popstate 事件

同一个文档的 history 对象出现变化时，就会触发 popstate 事件。

不同的浏览器在加载页面时处理 popstate 事件的形式存在差异。页面加载时 Chrome 和 Safari 通常会触发 popstate 事件，但 Firefox 则不会。

注意：

调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件. popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者调用 history.back()、history.forward()、history.go()方法)。

Vue 相关文章输出计划

最近总有朋友问我 Vue 相关的问题，因此接下来我会输出 10 篇 Vue 相关的文章，希望对大家有一定的帮助。我会保持在 7 到 10 天更新一篇。

1. Vuex 注入 Vue 生命周期的过程（完成）
2. 学习 Vue 源码的必要知识储备（完成）
3. 浅析 Vue 响应式原理（完成）
4. 新老 VNode 进行 patch 的过程
5. 如何开发功能组件并上传 npm
6. 从这几个方面优化你的 Vue 项目
7. 从 Vue-Router 设计讲前端路由发展
8. 在项目中如何正确的使用 Webpack
9. Vue 服务端渲染
10. Axios 与 Fetch 该如何选择