重构HashHistory：解密JavaScript源码中的URL哈希更改

2023-09-11 19:26:41

概述

在JavaScript的世界中，history API扮演着至关重要的角色，它允许我们轻松操纵浏览历史记录。其中，hashHistory和browserHistory是两种常用的历史记录类型，它们分别利用URL哈希值和浏览器的后退/前进按钮来管理历史记录。本文将聚焦于hashHistory，从头开始实现一个简单的hashHistory，帮助您深入理解JavaScript源码中URL哈希更改的机制。

哈希变更检测

hashHistory的核心在于检测URL哈希值的更改。为此，我们需要创建一个事件监听器，当URL哈希值发生改变时触发。

window.addEventListener('hashchange', (event) => {
  // TODO: Implement hash change handling
});

当哈希值发生更改时，我们需要获取新的哈希值，并将其与当前的哈希值进行比较。如果两者不同，则触发一个自定义事件，以便其他部分的代码能够做出响应。

const newHash = window.location.hash;
if (newHash !== currentHash) {
  dispatchEvent(new CustomEvent('hashchange', { detail: { newHash, oldHash } }));
}

浏览历史记录的哈希变更

接下来，我们需要实现浏览历史记录的哈希变更。当用户点击浏览器的后退/前进按钮时，需要相应地更新URL哈希值。

window.addEventListener('popstate', (event) => {
  // TODO: Implement popstate handling
});

当popstate事件触发时，我们需要获取当前的URL哈希值，并将其与上一个哈希值进行比较。如果两者不同，则触发一个自定义事件，以便其他部分的代码能够做出响应。

const newHash = window.location.hash;
if (newHash !== currentHash) {
  dispatchEvent(new CustomEvent('hashchange', { detail: { newHash, oldHash } }));
}

浏览历史记录的哈希变更对象

最后，我们需要实现浏览历史记录的哈希变更对象。这个对象将包含与哈希值相关的各种信息，如当前哈希值、上一个哈希值、哈希值更改的时间戳等。

const history = {
  get length() {
    return window.history.length;
  },
  get state() {
    return window.history.state;
  },
  set state(state) {
    window.history.replaceState(state, '', window.location.href);
  },
  push(state, title, url) {
    window.history.pushState(state, title, url);
  },
  replace(state, title, url) {
    window.history.replaceState(state, title, url);
  },
  go(delta) {
    window.history.go(delta);
  }
};