如何製作自己的原生 JavaScript 路由
當你想到路由時，通常會想到類似react之類的庫。但實際上，這些庫和框架仍然使用vanillaJavaScript。那麼該怎麼實現呢？
我希望這個“JavaScript路由教程”能夠幫你瞭解如何用原生js寫出自己的路由。
簡介
我遇到了很多出於各種原因想要自己建立路由的人。既然你看到本文，那意味著你可能也是其中的一個！
最重要的是，使用vanillajsrouter可以減少你對框架的依賴。
只要你瞭解實現它所涉及的所有部分，就可以相對容易的在原生 JavaScript 中建立自己的路由。
以下是製作自己的JS router時要了解的關鍵事項：
- 原生 JS 路由的關鍵是location.pathname屬性。
- 偵聽 “popstate”事件以響應.pathname的更改。每當在瀏覽器的位址列中輸入新的 URL，但我們不想重新整理頁面時，就會發生這種情況，我們只是想通過載入新內容來重新整理檢視。
- 你可以選擇將路由儲存在routes[]陣列中。
- 必須用JavaScript 正則表示式（RegEx）才能解析 URL。
- 如果希望將路由整合到本機瀏覽器體系結構中，那麼對history和history.pushState（JavaScript 的 History API）的基本瞭解至關重要。
首先，我們將處理 History API。
JavaScript 的 History API
我看過很多沒有提到 JavaScript History API 的vanilla JS router
- history.back()與history.go(-1)相同，或者當用戶在瀏覽器中單擊Back按鈕時。你可以用任何一種方法達到相同的效果。
- 當用戶按下瀏覽器的Forward按鈕時，將執行history.forward()，它等效於history.go(1)”。
- go()與.back()和forward()方法相似，不同之處在於你可以指定瀏覽器歷史記錄棧中要前進或後退的步數。 。
- pushState()會將新狀態推送到 History API。
- .length屬性是會話歷史記錄中的元素數。
- .state屬性用於查詢狀態，而無需偵聽“ popstate”事件。
現在開始實現我們自己的原生 JS 路由！
我將簡單地對的html、css和JavaScript進行註釋。
基於 History API 的 Vanilla JS 路由設定
先讓我們仔細研究構建 URL 切換器所需的最少程式碼（而無需重新整理頁面），然後我會向你展示其的工作方式的 GIF 動圖。
<html>
<head>
<title>Hello</title>
<script type = "module">
function select_tab(id) {
// remove selected class from all buttons
document.querySelectorAll(".route").forEach(item => item.classList.remove('selected'));
// select clicked element (visually)
document.querySelectorAll("#" + id).forEach(item => item.classList.add('selected'));
}
function load_content(id) {
// Update text "Content loading for {id}..."
// Of course, here you would do you content loading magic
// Perhaps run Fetch API to update resources
document.querySelector("#content").innerHTML = 'Content loading for /' + id + '...';
}
function push(event) {
// Get id attribute of the box or button or link clicked
let id = event.target.id;
// Visually select the clicked button/tab/box
select_tab(id);
// Update Title in Window's Tab
document.title = id;
// Load content for this tab/page
loadContent(id);
// Finally push state change to the address bar
window.history.pushState({id}, `${id}`, `/page/${id}`);
}
window.onload = event => {
// Add history push() event when boxes are clicked
window["home"].addEventListener("click", event => push(event))
window["about"].addEventListener("click", event => push(event))
window["gallery"].addEventListener("click", event => push(event))
window["contact"].addEventListener("click", event => push(event))
window["help"].addEventListener("click", event => push(event))
}
// Listen for PopStateEvent (Back or Forward buttons are clicked)
window.addEventListener("popstate", event => {
// Grab the history state id
let stateId = event.state.id;
// Show clicked id in console (just for fun)
console.log("stateId = ", stateId);
// Visually select the clicked button/tab/box
select_tab(stateId);
// Load content for this tab/page
loadContent(id);
});
</script>
<style>
* { /* global font */
font-family: Verdana;
font-size: 18px;
}
#root { display: flex; flex-direction: row; }
#content { display: flex;
display: block;
width: 800px;
height: 250px;
/* vertically centered text */
line-height: 250px;
border: 2px solid #555;
margin: 32px;
text-align: center;
}
.route {
cursor: pointer;
justify-content: center;
width: 150px;
height: 50px;
/* vertically centered text */
line-height: 50px;
position: relative;
border: 2px solid #555;
background: white;
text-align: center;
margin: 16px;
}
.route.selected { background: yellow; }
</style>
</head>
<body>
<section id = "root">
<section class = "route" id = "home">/home</section>
<section class = "route" id = "about">/about</section>
<section class = "route" id = "gallery">/gallery</section>
<section class = "route" id = "contact">/contact</section>
<section class = "route" id = "help">/help</section>
</section>
<main id = "content">Content loading...</main>
</body>
</html>核心是對的window.history.pushState({id}, ${id}, /page/${id});呼叫；
第一個引數是狀態的唯一 ID，第二個是“標籤標題”文字，第三個引數是你希望位址列中要現實的路徑。這就是使瀏覽器無需重新載入頁面即可更改 URL 的原因。
結果。現在，每次我們單擊按鈕時，URL實際上都會在瀏覽器的位址列中更改。內容框也會更新。
我們的原生 JS 路由開始運行了。請注意，每次單擊按鈕時，history.pushState 被觸發。我們只需將儲存在元素的 id 屬性中的 clicked 元素的 id 傳遞給它即可：home，about，gallery等。它們應與你要導航到的實際頁面一致。當然這不是儲存頁面名稱的唯一方法，例如可以用 array [] 或其他任何方式。這就是本例中的操作方式。
當然我們還需要從伺服器載入有關該位置的佈局和資源的內容。這取決於你的程式。可以是任何東西。
使“後退”和“前進”按鈕起作用
通過使用history.pushState，你將自動使Back和Forward按鈕導航到上一個或下一個狀態。這樣做會產生popstate事件。這是你必須再次更新檢視的部分。 （第一次是我們單擊按鈕時。）
但是由於該事件帶有單擊的id，因此單擊Back或Forward時很容易重新整理檢視並重新載入內容。
我們在這裡沒有使用react或vue，因此在我的原始碼中load_content將負責直接在 DOM 中更新檢視。此區域可能填充了你的 API 載入的某些內容。由於這只是“前端”示例，因此我無法向你展示太多內容。但這就是它在客戶端上的工作方式。
廣州VI設計公司https://www.houdianzi.com
初始化伺服器端的路由負載
將它們放在一起還需要再執行一個步驟。在我的例子中，只用了router.html。當你第一次在 PWA 中載入此路由時，必須確保如果直接在位址列中輸入/page/home時，它可以工作。
到目前為止，我們僅從前端更改了路由器地址。假定每次你導航到出現在路由按鈕上的 URL 時，實際上都會從伺服器單獨載入該 URL。
因此你有責任確保/page/about將路由器和頁面的載入到應用程式的根檢視中。它還應突出顯示“current”按鈕。
實施完畢後，你的路由就完成了。你如何選擇重新載入#content元素中的內容完全取決於你自己和你的後端設計。