概述
这是我在单页Web应用这本书上看到的方法,并深入的研究了一下,把结果记录在下面,供以后开发时参考,相信对其它人也有用。
说明一下,这个方法已经过时了,H5有更新的方法:history api,我们在锚接口(下)会讲到。
引子
自从接触单页面spa之后,我就对它的路由非常好奇:既然不是传统的利用文件夹存放路径的形式来路由的话,那到底单页面spa是怎么路由的呢?
更关键的是,复制url并在另一个页面打开,内容为什么不会变呢?
说明
- url的hash值改变的时候,页面并不会刷新,这是唯一改变url而不刷新页面的方法。
- 可以利用
window.location.hash
给url添上hash值。 - url的hash值改变的时候,会触发一个hashchange事件,通过监听这个hashchange事件可以做一些处理。
- 监听这个hashchange事件的时候可以通过
window.location.hash
获得url的hash值。
解决方案
SPA怎么路由
- SPA切换页面的时候,记录哪些模块需要渲染,哪些不需要渲染,然后做成hash值。
- SPA切换页面后,把这个hash值放在url中,生成一个新的url。
- 由于url的hash值改变的时候,页面并不会刷新,所以切换页面时,页面不刷新。
- 当浏览器按后退键的时候,url发生改变,因为是hash值改变,页面也不刷新。
- 此时会触发一个hashchange事件。
- 通过监听这个hashchange事件,获得此时的hash值。
- 通过这个hash值可以知道哪些模块需要渲染,从而渲染他们。
- 渲染时url没有发生改变,页面仍然不刷新。
- 路由完成,整个过程页面不刷新。
复制url并在另一个页面打开
由于页面加载的时候不触发hashchange事件,那复制url并在另一个页面打开的时候怎么获取hash里面的数据呢?
解决方案其实很简单,在页面加载的时候,用js触发一次hashchange事件即可。
例子
下面是我编写的一段测试代码供大家参考。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
//自动生成数组
function generateNum (num){
var ret = [];
for (var i = 0; i < num; i++) {
ret.push(Math.ceil(100*Math.random()));
};
return ret;
}
//hashchange事件,如果有hash值,则输出到oDiv。
function onHashchange() {
var oDiv = document.getElementById("div1");
console.log(window.location.hash.substring(1));
if(window.location.hash.substring(1)) {
oDiv.innerHTML = window.location.hash.substring(1);
}
}
//页面加载
window.onload=function (){
//加载时触发一次hashchange事件
$(window)
.bind( 'hashchange', onHashchange )
.trigger( 'hashchange' );
//点击事件,把数组装在hash里面
document.getElementById("input1").onclick=function(){
window.location.hash = generateNum (6);
}
}
</script>
</head>
<body>
这是数组:
<div id="div1"></div>
<input type="button" value="生成随机数组" id="input1" />
</body>
</html>
其它
- 这项技术不仅在SPA中有用处,而且在翻页,商城选购等地方也有用到,我就不一一举例了。
- jQuery封装了
window.location.hash
方法,提供了更加便捷的方法:$.uriAnchor
。主要是利用$.uriAnchor.setAnchor()
方法来修改hash值,用$.uriAnchor.makeAnchorMap()
方法来读取hash值。 - 由于
window.location.hash
方法的初衷并不是做这个的,所以H5特别为这个写了一个api——history api,我会在锚接口(下)里面讲。