Day05 從 Hash Anchor 看原生 History API （上）

前言

近期有朋友在討論 React Router 背後實現的邏輯是什麼，好奇為什麼沒有跳轉頁面但是可以去變動 url，按瀏覽器上下頁也不會跳轉網頁可以像是使用 App 般流暢的切換畫面，如果你也好奇這些，那你看這系列就沒錯了，因為這些也都是透過原生 Web API 中的 History API 實作的。

為了更容易及更深刻可以了解 History API，先用一個比較常見的角色 Hash Anchor 來讓大家複習這類型 API 可以達到的功能，正篇挪到下篇再來仔細研究 React Router 是怎麼利用 History API 實作這麼多便利的功能吧。

透過案例瞭解或回顧 Hash Anchor (錨點) 吧

<a href="#section1">section1</a>

先透過以上連結點擊後網頁並沒有重 reload ，而會你會發現幾件事

網址變成了 #section1，此時的網址結構為 原本網址#hash
畫面跳轉到了 section1 這個 id 的元件位置，畫面切齊元件上緣
附上 #section1 給別人開啟網站再 load 完頁面後也會觸發 1. 的效果

如果照以下步驟又可以發現有趣的事情

依序點了 #section1 、#section2 、#section3、#section4、#section5
再操作頁面回上一頁，會依照一般網頁上一頁依序變回 #section4、#section3、#section2、#section1 並且跳到指定 id 的元件位置

以上動作會發現 沒有任何重 load 頁面的事件發生 ，就好像這次網頁變化就是為了 快速移動到網頁指定區塊，但事實上也是拉，所以稱之為 Anchor 錨點事件，再行銷特定商品或整夜商品裡快速定位每個商品是很方便的，比如以下。

window.onhashchange 事件

如果用程式切換 anchor hash，也會觸發 onhashchange，也會同上切換到指定的 id 元件位置。

let onHashChange = () => {  
  // do something
  document.getElementById('urlDisplay').innerText = location.href;
}

window.addEventListener("hashchange", onHashChange, false);

網頁也可以監聽這些錨點，在切換時候執行 callback，如剛上面範例有使用切換 hash anchor 時將當前網址更新在 Nav 上，以便讓大家在 iframe 執行專案時能觀察到完整 url，以下再來舉個案例，這是一個 login 的 modal。

如果運用在網頁的 modal ，每個畫面切換都使用 anchor + onhashchange 可以帶來的好處

邏輯統一整理：popup 各種切換不同頁面邏輯都是以 anchor 為基準，當前 hash code 是什麼就在 onHashChnage 實作
更流暢的 mobile web 體驗：讓 mobile web 可以操作透過回上頁按鈕切換或關閉 popup。

location.hash

使用 location.hash 可以取得當前 hash，也可以指定 hash，一樣會觸發 onHashChnage 事件
如果自動切換就可以做出類似簡報自動播放的效果

let onHashChange = () => {  
  document.getElementById('urlDisplay').innerText = location.href;
}
window.addEventListener("hashchange", onHashChange, false);

---

const sectionIds = ['section1','section2','section3','section4','section5'];
let index = 0;
let changeAnchor = () => {
  location.hash = sectionIds[index++];
  if(index >= sectionIds.length){index = 0;}
};
setInterval(changeAnchor, 1000);