spa

spa

spa全称：single-page application（单页应用）

是一种特殊的Web应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript、CSS。一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用JavaScript动态的变换HTML,从而实现UI与用户的交互。

SPA百度百科

最显著的特点：正常情况下，我们会在一个页面中链接到其他的很多个页面，进行页面的跳转，但是如果使用单页面应用的话，我们始终在一个页面中。

由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。

得益于ajax，我们可以实现无跳转刷新

又多亏了浏览器的histroy机制，我们用hash的变化从而可以实现推动界面变化。

实现spa

要实现spa，最关键的便是处理#后面的字符，也就是大家常说的URL的锚。

首先得了解一个对象：Location

• Location 对象包含有关当前 URL 的信息。
• Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

Location 对象的W3Cschool详细介绍

了解了Location 对象之后，我们可以知道，#后面的字符，其实location对象的hash属性的值，即是说，我们可以轻松拿到这个#后面字符的变化值，代码如下：

let hash = document.location.hash;

然而仅仅能够获取hash属性，是无法实现spa的，我们还需要能够改变hash值。我们可以直接使用a标签跳转：

<a href="#xiaoming">小明</a>
<a href="#xiaofang">小芳</a>
<a href="#xiaodong">小冬</a>
<a href="#xiaowang">小王</a>

到这里，我们还需要一个能监听hash值变化的事件：hashchange

见名知意，通过hashchange事件，我们可以监视#后面字符，一旦发生改变，就会触发此事件。

搞清楚实现方法之后，我们就可以开始写代码了。

我的小demo：

文件夹结构：

图1

html：

图2

css：

图3

js:

图4

json实例:

图5

实现结果:

图6

这只是一个小demo，实际上，现在主流的很多框架特别适合用于开发spa页面，如angularJS，vueJs,React,backbone，extjs等。

最后，再来谈一谈spa的优缺点

优点：

• 分离前后端关注点，前端负责view，后端负责model，各司其职；
• 服务器只接口提供数据，不用展示逻辑和页面合成，提高性能；
• 同一套后端程序代码，不用修改兼容Web界面、手机；
• 用户体验好、快，内容的改变不需要重新加载整个页面
• 可以缓存较多数据，减少服务器压力
• 单页应用像网络一样，几乎随处可以访问—不像大多数的桌面应用，用户可以通过任务网络连接和适当的浏览器访问单页应用。如今，这一名单包括智能手机、平板电脑、电视、笔记本电脑和台式计算机。

缺点

• 刚开始的时候加载可能慢很多
• 用户操作需要写逻辑，前进、后退等；
• 页面复杂度提高很多，复杂逻辑难度成倍