纯JavaScript实现值变更触发函数：监听location.href变更方案

在React中，我们可以通过useEffect钩子监听状态值变化并触发函数，比如：

const [myState, setMyState] = useState("some-value");

useEffect(
   () => {
      someFunctionToTrigger();
   }, [myState]
);

但如果要在纯JavaScript中监听location.href的变更（且Proxy对location对象无效），可以通过以下方案实现：

核心实现思路 #

location.href的变更主要来自三种场景：浏览器前进/后退按钮、history.pushState/history.replaceState调用、hash路由下的hash值变更。我们需要覆盖这些场景来确保每次href变化都能触发目标函数：

// 定义href变更时要执行的处理函数
function handleHrefChange() {
  console.log("location.href已更新:", location.href);
  // 在这里编写你的业务逻辑
}

// 重写history的pushState方法，保证调用时触发处理函数
const originalPushState = history.pushState;
history.pushState = function(...args) {
  originalPushState.apply(this, args);
  handleHrefChange();
};

// 重写history的replaceState方法
const originalReplaceState = history.replaceState;
history.replaceState = function(...args) {
  originalReplaceState.apply(this, args);
  handleHrefChange();
};

// 监听浏览器前进/后退事件
window.addEventListener("popstate", handleHrefChange);

// 监听hash路由的hash值变更（如果你的页面使用hash模式）
window.addEventListener("hashchange", handleHrefChange);

说明 #

• 重写pushState和replaceState是因为这两个API不会触发原生的popstate事件，必须手动触发处理函数；
• popstate事件会在浏览器点击前进/后退按钮，或者调用history.back()/history.forward()时触发；
• hashchange事件专门处理hash路由中#后面部分的变更，适合单页应用的hash模式场景。

内容的提问来源于stack exchange，提问作者Daniel_Kamel