浅析HTML5中的 History 模式

2023年6月11日上午9:02 • JavaScript

浅析HTML5中的 History 模式

前言

在 Web 开发中，经常会涉及到前端路由，而 History 模式是其中较为常用的一种。在 HTML5 中，History 模式提供了客户端路由的强大功能，允许我们改变 URL 且不会进行页面的刷新。

本文将从基础概念、使用方法和示例等方面进行阐述，希望能够对读者有所启发和帮助。

基础概念

浏览器路由

在传统的 Web 开发中，路由主要由服务器端进行控制，即服务器接受客户端的请求，根据匹配规则返回不同的页面。这种方式需要进行页面的刷新，造成了用户体验上的不便。

为了解决这个问题，Web 前端路由开始逐渐兴起，即通过 JavaScript 的方式进行页面的切换，从而提高了用户体验。

前端路由

前端路由的核心理念为：在 URL 中记录页面的状态。在这种模式下，HTML 页面的核心在于当前 URL，因为 URL 是唯一的、可指向特定状态的链接，并且能够被用户直接书签和分享。

前端路由主要由两部分组成：URL 监听和视图更新。

History 模式

HTML5 中提供了 History 模式，支持在不刷新页面的情况下改变 URL。

History 模式可以通过 history 对象中的一系列方法来完成 URL 操作：

window.history.pushState(state, title, url)：将当前 URL 加入到历史列表中，并替换当前 URL；
window.history.replaceState(state, title, url)：替换当前 URL；
window.history.go(number)：前进或后退指定步数。

使用方法

History 模式的使用方法比较简单，主要分为两步：

通过 pushState 或 replaceState 方法改变 URL；
在应用程序中添加相应的路由处理逻辑，以实现 URL 和视图的转换。

下面是一个具体的例子：

// 使用 pushState 方法改变 URL
history.pushState(null, null, "/page1");

// 监听 popstate 事件，实现路由处理逻辑
window.addEventListener("popstate", e => {
  // 根据 URL 进行相应的路由处理
  let path = location.pathname;
  if (path === "/page1") {
    // 切换到 page1 对应的视图
  } else if (path === "/page2") {
    // 切换到 page2 对应的视图
  }
});

在上面的代码中，pushState 方法用于将当前 URL 更改为 /page1，同时向浏览器历史记录中添加一条记录。popstate 事件用于监听 URL 的变化，从而实现相应的路由处理逻辑。

示例说明

示例一：切换导航菜单

在这个示例中，用户通过点击导航菜单来切换页面内容，只改变了 URL 中的 hash 值。

// 监听 click 事件，改变 URL 并更新视图
document.querySelectorAll("nav a").forEach(a => {
  a.addEventListener("click", e => {
    e.preventDefault();
    let href = e.target.getAttribute("href");
    history.pushState(null, null, href);
    updateView();
  });
});

// 监听 popstate 事件，处理路由变化
window.addEventListener("popstate", e => {
  updateView();
});

// 更新视图
function updateView() {
  let path = window.location.pathname;
  let view = document.querySelector(`#${path.slice(1)}`);
  if (view) {
    document.querySelectorAll(".page").forEach(p => {
      p.classList.remove("active");
    });
    view.classList.add("active");
  }
}

其中，updateView 函数用于根据 URL 来更新视图，使得页面的显示与 URL 中的 hash 值保持一致。这样点击导航菜单后，会更改 URL 中的 hash 值并更新相应的视图。

示例二：路由懒加载

在这个示例中，将路由拆分成多个组件，使用路由懒加载的方式进行代码分离，实现更好的代码组织和代码管理。

const routes = {
  "/": () => import("./pages/home.js"),
  "/about": () => import("./pages/about.js"),
  "/contact": () => import("./pages/contact.js"),
};

// 监听 click 事件，异步加载组件并更新视图
document.querySelectorAll("nav a").forEach(a => {
  a.addEventListener("click", e => {
    e.preventDefault();
    let href = e.target.getAttribute("href");
    history.pushState(null, null, href);
    updateView();
  });
});

// 监听 popstate 事件，处理路由变化
window.addEventListener("popstate", e => {
  updateView();
});

// 更新视图
async function updateView() {
  let path = window.location.pathname;
  let view = routes[path];
  if (view) {
    let component = await view();
    document.querySelectorAll(".page").forEach(p => {
      p.classList.remove("active");
    });
    component.default.classList.add("active");
  }
}

在这个代码中，routes 对象用于保存路径对应的组件，通过异步加载组件并更新 DOM 树，实现了路由懒加载的效果，避免了代码的冗余和过度加载。