单页应用

1. 概念

单页应用，简称spa（single page application）:

重写当前的页面来与用户交互，而不需要重新加载整个页面；

单页面做到了前后端分离，后端负责处理数据提供接口，前端负责渲染页面；

2. 工作原理

实质是：改变路由时，不刷新页面（从缓存中拿数据），两种方法：window.history对象或 location.hash

（1）history

window.history包含了浏览器的历史信息，有以下几个常用的方法：

{

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

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

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

• html5新增的方法{

• 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 事件，也能达到同样的目的

 

3 spa 的优缺点

优点有：

• 无刷新体验，用户在切换页面过程中不会频繁被“打断”，因为界面框架都在本地，对用户的响应非常及时，因此提升了用户体验；

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

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

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

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

缺点有：

• 对 SEO 不太优好，尽管可以通过 Prerender 预渲染优化等技术解决一部分，但是相对还是不容易索引到它；

• 易出错，需要使用程序管理前进、后退、地址栏等信息；

• 较高的前端开发门槛，对技术能力要求较高，需要对设计模式有一定理解，因为面对不是一个简单的页面，而是一个运行在浏览器环境里面的桌面软件。