在現(xiàn)代Web開發(fā)中，單頁面應(yīng)用（Single Page Application，簡稱SPA）因其流暢的用戶體驗(yàn)和高效的頁面交互能力而備受青睞。前端路由作為SPA的核心技術(shù)之一，允許用戶在不刷新整個(gè)頁面的情況下，通過URL的變化來加載和切換不同的頁面內(nèi)容。本文將通過手寫代碼的方式，深入探討前端路由的兩種主流實(shí)現(xiàn)方式：Hash模式和History模式。

1. Hash模式：簡潔而廣泛適用

Hash模式利用URL的哈希（#之后的部分）來存儲路由信息，由于哈希的變化不會觸發(fā)完整的頁面刷新，因此非常適合于實(shí)現(xiàn)SPA的前端路由。下面是一個(gè)使用Hash模式的手寫路由實(shí)現(xiàn)示例：

<!-- HTML結(jié)構(gòu) -->
<nav id="nav"><ul><li><a href="#/page1">Page 1</a></li><li><a href="#/page2">Page 2</a></li></ul>
</nav>
<div id="content"></div>

class HashRouter {constructor() {this.routes = {};window.addEventListener('hashchange', this.load.bind(this), false);this.load();}register(path, callback) {this.routes[path] = callback;}load() {let hash = window.location.hash.slice(1);let handler = this.routes[hash] || (() => {});handler.call(this);}
}let router = new HashRouter();
router.register('/page1', () => document.getElementById('content').innerHTML = 'Page 1 Content');
router.register('/page2', () => document.getElementById('content').innerHTML = 'Page 2 Content');

在這個(gè)示例中，我們監(jiān)聽hashchange事件，每當(dāng)URL的哈希部分發(fā)生變化時(shí)，都會觸發(fā)load方法，根據(jù)當(dāng)前的哈希值加載相應(yīng)的內(nèi)容。Hash模式的一個(gè)主要優(yōu)點(diǎn)是它的廣泛兼容性，幾乎所有的瀏覽器都支持哈希的變化。

這里有一個(gè)細(xì)節(jié)就是使用bind來“綁定”this值

當(dāng)你在事件監(jiān)聽器中直接使用this.load，在事件觸發(fā)時(shí)，this的值會根據(jù)調(diào)用上下文來決定，通常在這種情況下，this會指向事件發(fā)生的元素（比如window對象，因?yàn)樵?code>hashchange事件中，this通常指的是window）。這可能會導(dǎo)致你的load方法無法訪問到HashRouter或HistoryRouter實(shí)例的屬性和方法，因?yàn)?code>this不再指向你期望的實(shí)例。

為了避免這個(gè)問題，使用bind方法來“綁定”this值，確保無論load方法在哪里被調(diào)用，其內(nèi)部的this都會指向HashRouter或HistoryRouter的實(shí)例。這樣，load方法就能正確訪問和操作實(shí)例上的屬性和方法，如this.routes和this.load方法自身。

簡而言之，使用this.load.bind(this)是為了確保load方法的this上下文正確無誤，使其能夠訪問到所在類實(shí)例的成員，從而正確執(zhí)行路由邏輯。如果不使用bind，this可能會指向錯(cuò)誤的對象，導(dǎo)致方法無法按預(yù)期工作。

2. History模式：更自然的用戶體驗(yàn)

History模式利用HTML5的History API（包括pushState, replaceState和popstate事件）來管理瀏覽器的歷史記錄。相比于Hash模式，History模式能夠提供更加自然的URL結(jié)構(gòu)，沒有顯眼的#符號，使URL看起來更像是傳統(tǒng)的多頁面應(yīng)用。說多了就是少個(gè)#讓人覺得更好看一點(diǎn)

<!-- HTML結(jié)構(gòu) -->
<nav id="nav"><ul><li><a href="/page1">Page 1</a></li><li><a href="/page2">Page 2</a></li></ul>
</nav>
<div id="content"></div>

class HistoryRouter {constructor() {this.routes = {};window.addEventListener('popstate', this.load.bind(this), false);this.load();}register(path, callback) {this.routes[path] = callback;}load() {let path = window.location.pathname;let handler = this.routes[path] || (() => {});handler.call(this);}navigate(path) {history.pushState({}, '', path);this.load();}
}let router = new HistoryRouter();
router.register('/page1', () => document.getElementById('content').innerHTML = 'Page 1 Content');
router.register('/page2', () => document.getElementById('content').innerHTML = 'Page 2 Content');document.querySelectorAll('#nav a').forEach(link => {link.addEventListener('click', (e) => {e.preventDefault();router.navigate(e.target.href);});
});

在History模式下，我們通過監(jiān)聽popstate事件來捕獲URL的變化，并通過pushState方法來改變當(dāng)前的URL，同時(shí)保持頁面不刷新。這里這種history方法可能會受到file://協(xié)議的限制，導(dǎo)致pushState代碼運(yùn)行不了。最推薦的方法是在本地搭建一個(gè)HTTP服務(wù)器來運(yùn)行你的項(xiàng)目，而不是直接打開.html文件。這樣可以繞過file://協(xié)議的限制。如果你使用的是vs code的呢，就右鍵文件通過open with live server方法打開，這個(gè)功能允許你快速啟動一個(gè)輕量級的HTTP服務(wù)器，用于預(yù)覽和測試你的HTML、CSS和JavaScript代碼，而無需手動配置服務(wù)器環(huán)境。

3. 結(jié)論

無論是Hash模式還是History模式，每種方法都有其獨(dú)特的優(yōu)缺點(diǎn)。Hash模式易于實(shí)現(xiàn)且兼容性好，而History模式則提供更美觀的URL和更自然的瀏覽體驗(yàn)。在實(shí)際項(xiàng)目中，根據(jù)應(yīng)用的具體需求和目標(biāo)用戶群體，選擇合適的前端路由模式至關(guān)重要。通過手寫代碼實(shí)踐，我們不僅能加深對這兩種模式的理解，還能更好地掌握如何在真實(shí)項(xiàng)目中靈活運(yùn)用前端路由技術(shù)。