hashchange是什么？

hash即URL中“#”字符后面的部分。使用瀏覽器訪問網(wǎng)頁時(shí)，如果網(wǎng)頁URL中帶有hash，頁面就會(huì)定位到id（或name）與hash值一樣的元素的位置，故而又稱之為錨點(diǎn)。hash還有另一個(gè)特點(diǎn)，它的改變不會(huì)導(dǎo)致頁面重新加載，因此在單頁應(yīng)用流行的當(dāng)下，它的用處就更多了。

而hashchange事件，顧名思義，就是hash改變時(shí)觸發(fā)的事件。在 caniuse.com 上查一下兼容性可以發(fā)現(xiàn)，IE8就已經(jīng)支持該事件，但一直以來應(yīng)用甚少。

hashchange兼容性.jpg

hashchange事件觸發(fā)時(shí)，事件對(duì)象會(huì)有hash改變前的URL（oldURL）和hash改變后的URL（newURL）兩個(gè)屬性：

window.addEventListener('hashchange', function(e) {
  console.log(e.oldURL);
  console.log(e.newURL);
}, false);

它有什么用？

移動(dòng)端里有這樣一個(gè)功能，點(diǎn)擊小圖時(shí)在當(dāng)前頁面上展示大圖：

實(shí)際應(yīng)用.jpg

CSS和Javascript具體怎么實(shí)現(xiàn)的就不再啰嗦了，這里要考慮的問題是：當(dāng)進(jìn)入大圖展示狀態(tài)時(shí)，如何返回？這是手機(jī)的頁面，對(duì)于用慣APP的用戶來說，他很可能會(huì)點(diǎn)擊左下角的返回鍵。然而這是個(gè)瀏覽器，返回就意味著回到上一頁而不是退出大圖展示狀態(tài)。

下面講解一下如何利用hashchange解決這個(gè)問題。當(dāng)URL的hash改變時(shí)，雖然頁面不會(huì)重新加載，但仍然會(huì)被記錄到瀏覽器的歷史記錄中。也就是說，如果依次訪問a.html、b.html、b.html#abc，然后點(diǎn)擊后退，此時(shí)會(huì)返回b.html而不是a.html。而且，由于hash改變了，所以會(huì)觸發(fā)hashchange事件。這樣一來，只要在進(jìn)入大圖展示狀態(tài)時(shí)加上一個(gè)特定的hash，點(diǎn)擊返回鍵觸發(fā)hashchange時(shí)退出此狀態(tài)即可。代碼實(shí)現(xiàn)也很簡(jiǎn)單：

// 假設(shè)大圖展示狀態(tài)的hash為imgSlider
window.addEventListener('hashchange', function(e) {
  var re = /#imgSlider$/;
  if ( re.test(e.oldURL) && !re.test(e.newURL) ) {
    // 假設(shè)imgSlider為大圖展示組件對(duì)象
    imgSlider.hide();
  }
}, false);