JavaScript 怎么通过闭包实现一个简易的前端路由拦截器-js教程-PHP中文网

javascript可通过闭包封装路由状态与拦截逻辑，每个路由实例独立维护匹配条件、前置钩子和跳转行为，实现状态私有、多实例共存及异步钩子串行执行。

javascript 怎么通过闭包实现一个简易的前端路由拦截器

JavaScript 可以通过闭包封装路由状态和拦截逻辑，让每个路由规则独立维护自己的匹配条件、前置钩子和跳转行为，同时避免全局变量污染。

用闭包保存路由配置与钩子函数

闭包的核心是让内部函数持续访问外部函数作用域中的变量。我们可以把路由表、当前路径、以及注册的拦截器（如登录校验、权限检查）都定义在工厂函数内部，只暴露注册和触发方法：

外部无法直接修改路由表或当前路径，保证状态私有
每次调用工厂函数生成一个独立的路由实例，支持多路由系统共存
钩子函数（如 beforeEach）可被多次注册，按顺序执行并支持中断跳转

实现一个基础的拦截器工厂

下面是一个轻量、可复用的闭包式路由拦截器示例：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

function createRouter() {
  let currentPath = window.location.pathname;
  const routes = new Map();
  const beforeEachHooks = [];

  // 注册前置钩子
  function beforeEach(fn) {
    beforeEachHooks.push(fn);
  }

  // 注册路由路径与处理函数
  function add(path, handler) {
    routes.set(path, handler);
  }

  // 手动触发跳转（含拦截）
  async function navigate(toPath) {
    // 执行所有前置钩子，任一返回 false 则中止
    for (const hook of beforeEachHooks) {
      const result = await hook(toPath, currentPath);
      if (result === false) return;
    }

    const handler = routes.get(toPath);
    if (handler) {
      currentPath = toPath;
      handler();
    }
  }

  // 监听浏览器前进/后退（可选）
  window.addEventListener('popstate', () => {
    const newPath = window.location.pathname;
    navigate(newPath).catch(() => {});
  });

  return { add, beforeEach, navigate };
}

// 使用示例
const router = createRouter();

router.beforeEach((to, from) => {
  if (to === '/admin' && !localStorage.getItem('token')) {
    alert('请先登录');
    return false; // 阻止跳转
  }
});

router.add('/', () => console.log('首页'));
router.add('/admin', () => console.log('管理页'));

// 模拟跳转
router.navigate('/admin');