【前端】--单页面应用

单页面应用

概念

什么是单页应用呢？单页应用的全称是 single-page application，简称 SPA，它是一种网站应用的模型，它能够动态重写当前的页面来与用户交互，而不须要从新加载整个页面。单页应用的流畅性让 Web 应用更像桌面端或 Native 应用了。相对于传统的 Web 应用，单页应用作到了先后端分离，后端只负责处理数据提供接口，页面逻辑和页面渲染都交给了前端。前端发展到如今，单页应用的使用已经很普遍，目前时兴的 React、Vue、Angular 等前端框架均采用了 SPA 原则。单页应用意味着前端掌握了主动权，也让前端代码更复杂和庞大，模块化、组件化以及架构设计都变得愈来愈重要。

工做原理

SPA 的一个重要实现就是改变路由时，页面不刷新。实现这个功能，一般有两种方式：使用 window.history 对象或 location.hash。

history 对象

window.history 包含了浏览器的历史信息，它有如下几种经常使用方法：

history.back()：与在浏览器点击后退按钮相同；

history.forward()：与在浏览器中点击按钮向前相同；

history.go(n)：接受一个整数做为参数，移动到该整数指定的页面，好比 go(1) 至关于 forward()，go(-1) 至关于 back()，go(0) 至关于刷新当前页面。

HTML5 对 history 对象新增了 pushState() 和 replaceState() 方法，这两个方法能够往历史栈中添加数据，给用户的感受就是浏览器的 url 改变了，可是页面并无从新加载。pushState() 是在浏览记录中添加一个新记录，replaceState() 则是修改当前的浏览器记录，这是两者的细微差异，使用时参数的字段和含义都是同样的。

window.history.pushState(state, title, url)

state 是状态对象，能够用 history.state 读取；title 表示新页面的标题，可是如今的全部浏览器都会忽略这个字段，因此能够传 null；url 是新页面的地址，必须是和当前页面在同一个域。当用户点击浏览器上的前进和后退按钮时，或者调用上述 window.history 的 back、forward 和 go 方法，就会触发 popstate 事件。该事件只针对同一个文档，若是浏览历史的切换致使加载了不一样的文档，popstate 事件将不会被触发。popstate 事件回调函数的参数中的 state 属性指向 pushState() 和 replaceState() 方法为当前页面提供的状态，也就是 pushState() 和 replaceState() 方法使用时传的第一个参数 state。

hash

hash 是 location 对象的属性，它指的是当前 url 的锚，也就是从 # 号开始的部分。修改 location.hash 并监听 window 的 hashchange 事件，也能达到一样的目的。

优缺点

SPA 可圈可点，如今已被你们普遍使用，也获得了主流框架的支持，可是它也有局限性，咱们将它的优缺点总结以下。

优势有：

无刷新体验，用户在切换页面过程当中不会频繁被“打断”，由于界面框架都在本地，对用户的响应很是及时，所以提高了用户体验；

分离先后端关注点，前端负责界面显示，后端负责数据存储和计算，各司其职，不会把先后端的逻辑混杂在一块儿；

减轻服务器压力，服务器只用出数据就能够，不用管展现逻辑和页面合成，吞吐能力会提升几倍；

API 共享，同一套后端程序代码，不用修改就能够用于Web界面、手机、平板等多种客户端；

彻底的前端组件化，前端开发再也不以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整。

缺点有：

对 SEO 不太优好，尽管能够经过 Prerender 预渲染优化等技术解决一部分，可是相对仍是不容易索引到它；易出错，须要使用程序管理前进、后退、地址栏等信息；