SPA设计的意义
SPA也就是单页面
设计意义
a、前后端分离：前端做业务逻辑，后端处理数据和接口，大家相互不用耦合起来。
b、减轻服务器压力：每一个页面不需要每次都去请求服务端，当应用比较复杂，有十几个页面时，每个用户操作几个页面只需要请求一次，这样在很大程度上减轻服务器压力。
c、增强用户体验：从首页点某块到详情页，传统方式是从首页请求完之后再去服务端请求详情页，每次的连接都需要消耗ens，http建立连接以及传输过程还有接口响应的时间，这些都是用户可以感知到的东西。当使用单页面时，不存在多次下载页面的时间，只有接口耗费的时间，一定程度上增强了用户体验。
d、Prerender预渲染优化SEO：单页设计对于SEO有一些弱势，对搜索引擎不太友好。
点击下方链接，可看关于Prerender预渲染优化SEO的一些相关资料：
http://codingfishman.github.io/2016/05/06/prerender%E9%A2%84%E6%B8%B2%E6%9F%93%E4%BC%98%E5%8C%96SEO/
工作原理
工作原理
a、history API: 更加优雅，对浏览器有要求
history API
每一个入口打开进去，对应打开一个页面。
比如说这里点击入口2也就打开了页面2，这里的打开页面是不要请求服务端，而是通过本地的JS来控制。
从入口打开某个页面，这是操作一
当浏览器点击了前进、后退、或其它控制，比如说程序控制history.go()指定某一步，这样回到某个入口对应的页面上去，这是操作二
也就是说：第一个是要能执行打开的动作，第二个是要做历史记录操作单。通过前进、后退等等操作回到任何一个步骤。这个都是SPA实现需要考虑的步骤。
刚才所说的两点实现起来所要经过的桥梁也就是history这个对象，这个对象上有两个东西来实现这两个东西的。onpopstate和pushState
pushState ：用来创建一个历史记录
onpopstate ：用来相应浏览器的前进后退，也就是控制事件，当历史发生了改变会触发popstate，在这里面也就能回复到之前对应的某一个页面去。
b、hash：不是很优雅，但是兼容性好
hash
类似于history，其他差不多，不同是桥梁发生了变化，不再用history，而是用的hash。
一个URL上有host、search、和hash等，这里利用的原理就是hash。
当改变某一个地址时，修改这个hash,监听这个hashchange事件就知道页面的地址发生了变化，然后在这个事件内做相应的动作，也就能完成页面的切换。
对应的代码
history
history
浏览器打印
点击入口的时候并没有触发popstate，而是在前进后退的时候触发了这个事件。
hash
hash代码
对浏览器打印出来的操作
每次点击都会触发hashchange，在这里就能拿到当前的页面路径，也能拿到一些参数。可以放到hash后面去比如说b.html?xxx
网友评论