在现代前端开发中，单页应用（SPA, Single Page Application）已经成为了非常流行的开发模式。与传统的多页应用不同，SPA 的核心在于通过前端路由技术实现页面的动态切换，而不重新加载整个页面。这篇文章将带大家深入理解 Hash Router 的工作原理，并通过示例代码手写一个简单的 Hash Router。
HTTP 协议的无状态性
在讨论 Hash Router 之前，我们先简单了解一下 HTTP 协议的无状态性。HTTP 是一种无状态协议，意味着服务器无法主动向浏览器推送内容。每次请求一个新资源（例如从 / 跳转到 /page2），浏览器会重新向服务器发送请求，服务器返回对应的 HTML 页面。这种页面刷新机制会导致：
- 加载延迟：每次都要重新加载整个页面，导致白屏和等待。
- 用户体验不流畅：页面切换时内容突然消失，体验不够连贯。
单页应用（SPA）的优势
SPA 的出现解决了上述问题。在 SPA 中，浏览器只在初次加载时请求一个 HTML 页面，之后所有的页面切换和内容更新都由 JavaScript 动态完成。这带来了以下好处：
- 页面加载更快：避免了每次都重新加载页面，大大提升了响应速度。
- 用户体验更好：不同页面之间切换时，保持内容连贯，没有页面刷新带来的白屏现象。
Hash Router 的原理
要实现 SPA，前端路由是关键。在不刷新页面的情况下实现 URL 的变化，并根据不同的 URL 显示对应的页面内容，是 SPA 中的核心问题。Hash Router 是一种简单而有效的前端路由实现方式，它的原理如下：
-
Hash 部分：URL 中的
#后面的部分被称为 Hash，当 Hash 改变时，浏览器不会重新加载页面，这为 SPA 提供了基础支持。 -
监听 Hash 变化：通过 JavaScript 监听浏览器的
hashchange事件，当 URL 中的 Hash 改变时，前端可以捕获这一变化，并动态更新页面内容。 -
动态页面更新：根据当前的 Hash 值，JavaScript 可以加载相应的视图或组件，并将其渲染到页面上。这使得页面切换非常流畅。
手写一个简单的 Hash Router
下面是一段使用纯 JavaScript 实现的 Hash Router 代码示例。这个 Router 能够监听 Hash 的变化，并根据当前的 Hash 值渲染相应的页面内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手写 Hash Router</title>
</head>
<body>
<nav class="nav">
<ul>
<!-- router-link -->
<li><a href="#/page1">Page 1</a></li>
<li><a href="#/page2">Page 2</a></li>
<li><a href="#/page3">Page 3</a></li>
</ul>
</nav>
<!-- router-view -->
<div id="container"></div>
<script>
// 定义 Hash Router 类
class HashRouter {
constructor() {
this.routes = {}; // 用于存储路由和对应的处理函数
// 监听 hashchange 事件
window.addEventListener('hashchange', this.load.bind(this), false);
}
// 注册路由及其对应的回调函数
register(hash, callback = function() {}) {
this.routes[hash] = callback;
}
// 注册首页的路由回调
registerIndex(callback = function() {}) {
this.routes['index'] = callback;
}
// 处理路由加载
load() {
let hash = location.hash.slice(1); // 获取当前 hash 并去掉开头的 #
let handler;
if (!hash) {
handler = this.routes['index']; // 如果没有 hash，加载首页
} else {
handler = this.routes[hash]; // 根据 hash 加载对应的页面
}
handler // 防止用户访问没有的url
&& handler(); // 执行对应的回调函数
}
}
// 初始化 Router 实例
let router = new HashRouter();
let container = document.getElementById('container');
// 注册首页和其他页面的回调函数
router.registerIndex(() => container.innerHTML = '我是首页');
router.register('/page1', () => container.innerHTML = '我是 Page 1');
router.register('/page2', () => container.innerHTML = '我是 Page 2');
router.register('/page3', () => container.innerHTML = '我是 Page 3');
// 在页面刷新时加载当前路由
router.load();
</script>
</body>
</html>
代码解析
-
HashRouter类：这个类负责管理路由。它有一个routes对象用于存储路由和对应的回调函数。通过register方法可以注册路由，registerIndex用于注册首页的路由。 -
load方法：当 Hash 改变时，load方法会被调用。它通过location.hash.slice(1)获取当前的 Hash 值（去掉#），然后根据这个值从routes对象中找到对应的处理函数并执行。 -
事件监听：在构造函数中，我们使用
window.addEventListener('hashchange', this.load.bind(this), false)监听 Hash 的变化，每当 Hash 发生变化时，就会调用load方法来更新页面。其中bind是让load函数中的this指向实例对象，如果把load写成箭头函数的形式，可以不需要这一步。对this还不熟悉的小伙伴可以去看全面掌握JS中this的指向规则今天带大家深入解析一下javascript中的this关键字，首先来看一段代码 很明显这 - 掘金 (juejin.cn)这篇文章。 -
页面刷新处理：通过在最后一行调用
router.load()，即使在页面刷新时，当前的 Hash 对应的内容也会正确加载，而不是始终回到首页。
移动端应用的体验
通过使用 Hash Router，SPA 应用可以提供类似于移动端应用的用户体验。用户在页面中点击链接时，虽然地址栏中的 URL 发生了变化，但页面不会重新加载，内容会在不刷新的情况下动态更新。这种体验非常接近于手机应用中的页面切换：界面响应迅速，操作流畅。
结语
Hash Router 是实现单页应用中前端路由的一种简单而有效的方式。它通过监听 URL 中 Hash 部分的变化，动态更新页面内容，避免了页面刷新带来的性能问题和用户体验不佳的问题。手写一个 Hash Router 不仅有助于理解其工作原理，还能在项目中灵活运用这一技术，构建高效的 SPA 应用。
希望这篇文章能够帮助你更好地理解 Hash Router，并在实际开发中灵活应用。如果你有任何问题或想法，欢迎在评论区留言，我们一起讨论。
