SPA

为什么用SPA

    1. 减少服务器压力  如果不用spa  那么每次切换页面的时候，就会向服务器发送一个请求  

         服务器返回一个html文件   如果使用了SPA  在切换时，不需要请求服务器，只要通过本地的js来切换即可 并且服务器端不需要配置路由 完全做到前后端分离

   2. 增强用户体验  增加app流畅性 

 

SPA路由的实现方式有哪些？

1. hash方式  使用location.hash和hashchange事件实现路由

2. history api  使用html5的history api实现  主要就是popState事件等

 

SPA实现hash

1. Router构造函数  当前路由 和 路由对象

2. 初始化init监听页面加载完成与   hash变化事件  

3. 页面更新方法

4.  路由注册方法

 

SPA   history API实现方法

两个方法： history.pushState()  history.replaceState() 

一个事件： history.onpopstate

 

方法的参数：

参数1： obj 这个对象可以被popstate事件读取到  也可以在history对象中获取

参数2： title标题， 但是浏览器目前还没能实现 由于本身是个字符串 所以我们用“” 来代替

参数3：URL路径，一般设定为相对的url 绝对路径需要保证同源

       pushState 向浏览器的历史记录栈中压入一个历史记录 

 

事件的触发： 

在浏览器前进、后退时触发，一般是历史记录栈中的指针改变的时候就会触发这个事件了

 

history.state: 存储以上方法的data，不同浏览器的读写权限不一样

 

兼容： >IE10, >firefox4 ,>chrome8, safari5,opera11以上

 

为什么要使用History API

ajax的不足：

　　无法使用浏览器的前进、后退来切换前后

 

数据

　　单纯的使用ajax不利于搜索引擎优化

 

 

 

转载于:https://www.cnblogs.com/moneyss/p/10689403.html