SPA 单页面应用程序。

Posted 2021-01-13 blackcoding

　　看到这个问题，先说下自己的理解到的程度，再去参考做修正，争取这一次弄懂搞清楚

　　自己的理解： 单页面应用程序，解决浏览器获取数据刷新页面的尴尬，通过ajax请求获取数据达到异步更新视图的按钮，原理的实现由两种，

　　其一，通过hash值的变化，绑定onhashchange的回调函数更新视图，因为hash值的变化不会让页面失去响应，不会向服务器发送请求。下面列出几种可能改变hash值的方法，改变url中的hash。浏览器回退按钮可能出现历史记录中的url包含的hash值不一样，都将触发该事件；还有触发带瑁点的链接改变，再通过js直接获取location.hash来改变导致事件触发。

　　其二，通过同H5 historyAPI 来添加向浏览器的历史栈中添加记录。过去的方法只有通过back,forward，go三个方法来实现前进后退和跳转。到H5多了pushState,replaceState方法。pushState只是单纯的添加并不跳转到该记录，而replaceState,替换记录整个历史记录的length长度不变化。 hitstory.pushState(data,title,url),向url里写入第一个参数数据，并指定title的值。执行完历史栈中添加了一条记录，通过执行一次popstate事件其中popstate用来监听历史记录的变化，可以理解为监听浏览器后退、前进的操作。绑定onpopstate事件后执行location.reload(); 因为兼容性问题，History.js用于修补。