hashchange是什么？

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

而hashchange事件，顧名思義，就是hash改變時觸發的事件。在 caniuse.com 上查一下兼容性可以發現，IE8就已經支持該事件，但一直以來應用甚少。

hashchange兼容性.jpg

hashchange事件觸發時，事件對象會有hash改變前的URL（oldURL）和hash改變后的URL（newURL）兩個屬性：

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

它有什么用？

移動端里有這樣一個功能，點擊小圖時在當前頁面上展示大圖：

實際應用.jpg

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);