浅析hash特点、hashchange事件介绍及其常见应用场景（不同hash对应不同事件处理、移动端大图展示状态后退页面问题、原生轻应用头部后退问题、移动端自带返回按钮二次确认问题）
一、hash、hashchange 事件介绍
1、hash 是什么？
hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分，一般有当前页面中 href 中 # 地址触发。hash 即 URL 中 # 字符后面的部分，具有如下特点：
- 使用浏览器访问网页时，如果网页URL中带有hash，页面就会定位到 id（或name）与hash值一样的元素的位置；
- hash 还有另一个特点，它的改变不会导致页面重新加载；
- hash 值浏览器是不会随请求发送到服务器端的；
- 通过 window.location.hash 属性获取和设置 hash 值。
window.location.hash 值的变化会直接反应到浏览器地址栏（#后面的部分会发生变化），同时，浏览器地址栏 hash 值的变化也会触发 window.location.hash 值的变化，从而触发 onhashchange 事件。
2、hashchange 事件
- 当URL的片段标识符更改时，将触发hashchange事件（跟在#符号后面的URL部分，包括#符号）
- hashchange事件触发时，事件对象会有hash改变前的URL（oldURL）和hash改变后的URL（newURL）两个属性
window.addEventListener('hashchange', function(e) {
console.log(e.oldURL);
console.log(e.newURL)
}, false);
二、实际应用场景
1、hash 的简单应用
页面中有 3 个不同的a标签，当点击不同的a时给filterText赋予不同的值，可利用window.onhashchange事件来实现，这样避免了给每个a标签分别注册事件
<a href="#/"></a>
<a href="#/active"></a>
<a href="#/completed"></a>
//此函数监听hash值的变化，来给判断哪个按钮被点击，从而给filterText赋值
let filterText = 'all'
window.onhashchange = function () {
switch(window.location.hash) {
case '#/':
filterText = 'all'
break
case '#/active':
filterText = 'active'
break
case '#/completed':
filterText = 'completed'
}
}
2、hashchange 事件的应用
移动端里有这样一个功能，点击小图时在当前页面上展示大图，这应该是很常见的场景：
CSS和Javascript具体怎么实现的就不再啰嗦了，这里要考虑的问题是：当进入大图展示状态时，如何返回？这是手机的页面，对于用惯APP的用户来说，他很可能会点击左下角的返回键。然而这是个浏览器，返回就意味着回到上一页而不是退出大图展示状态。
下面讲解一下如何利用 hashchange 解决这个问题。我们需要了解的是：当URL的hash改变时，虽然页面不会重新加载，但仍然会被记录到浏览器的历史记录中。
也就是说，如果依次访问 a.html、b.html、b.html#abc，然后点击后退，此时会返回 b.html 而不是 a.html。而且，由于hash改变了，所以会触发hashchange事件。这样一来，只要在进入大图展示状态时加上一个特定的 hash，点击返回键触发 hashchange 时退出此状态即可。代码也很简单：
// 假设大图展示状态的hash为imgSlider
window.addEventListener('hashchange', function(e) {
var re = /#imgSlider$/;
if ( re.test(e.oldURL) && !re.test(e.newURL) ) {
// 假设imgSlider为大图展示组件对象
imgSlider.hide();
}
}, false);
3、hashChange 巧妙监听原生轻应用跳转
//页面初始化中添加hashchange的监听
initialize:function(){
window.addEventListener("hashchange", this.pageHashChange,false);
},
//隐藏
pageHashChange(){
if(startTimePicker) startTimePicker.hide();
if(endTimePicker) endTimePicker.hide();
if(remindPicker) remindPicker.hide();
},
4、一个小的业务场景：当用户进入一个页面按手机系统自带的返回按钮时，弹出一个挽留框，并阻止用户跳出这一行为。
解决方案：
（1）在进入当前页面时，通过加 hash 或者 pushState(null,null,window.location.href)，在 history 栈中增加一条和当前路径相同的地址
（2）当用户点击返回时，会触发window.onhashchange 或 window.onpopstate 事件，让 hash 或 pushState 行为在用户要返回时被监听到，此时弹出挽留框，页面还是之前的页面没有变化。
