词法作用域与闭包实现微型前端路由匹配器，通过iife封装私有路由表、正则编译、参数提取及url监听逻辑，支持路径注册、自动dispatch、嵌套路由，避免全局污染。

用词法作用域和闭包实现微型前端路由匹配器，核心是把路由规则和匹配逻辑封装在函数内部，让匹配器能记住注册的路径与对应处理器，同时避免全局污染。

用闭包保存路由表

路由匹配器需要维护一个路径-处理器映射表，但不应暴露给外部直接修改。通过立即执行函数（IIFE）创建私有作用域，把路由表 routes 声明在内部，仅暴露 on 和 dispatch 方法：

const createRouter = () => {
  const routes = new Map(); // 私有路由表，外部无法访问

  return {
    on(path, handler) {
      routes.set(path, handler);
    },
    dispatch(url) {
      const pathname = new URL(url, location.origin).pathname;
      const handler = routes.get(pathname);
      if (handler) handler();
    }
  };
};

const router = createRouter();
router.on('/home', () => console.log('进入首页'));
router.on('/about', () => console.log('进入关于页'));
router.dispatch('/home'); // 输出：进入首页

支持简单参数提取（基于词法作用域捕获）

要解析如 /user/123 中的 123，需在注册时预编译正则、并在闭包中记住参数名。利用闭包让每个 on 调用都拥有自己的一份正则和 keys 数组：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

const createRouter = () => {
  const routes = [];

  return {
    on(pattern, handler) {
      // 将 /user/:id → /^\/user\/([^/]+)$/, ['id']
      const keys = [];
      const regex = new RegExp(
        '^' + pattern.replace(/:(\w+)/g, (_, key) => {
          keys.push(key);
          return '([^/]+)';
        }) + '$'
      );
      routes.push({ regex, keys, handler });
    },
    dispatch(url) {
      const pathname = new URL(url, location.origin).pathname;
      for (const { regex, keys, handler } of routes) {
        const match = pathname.match(regex);
        if (match) {
          const params = Object.fromEntries(
            keys.map((key, i) => [key, match[i + 1]])
          );
          handler(params);
          return;
        }
      }
    }
  };
};

监听 URL 变化并自动 dispatch

结合 popstate 和 hashchange 事件，让路由响应浏览器导航。这些事件监听器在闭包内定义，自然捕获当前 dispatch 函数，无需绑定或传参：

const createRouter = () => {
  const routes = [];
  let currentPath = location.pathname;

  const dispatch = (url) => {
    // ……同上 dispatch 实现
  };

  const update = () => {
    const url = location.href;
    dispatch(url);
    currentPath = new URL(url, location.origin).pathname;
  };

  window.addEventListener('popstate', update);
  window.addEventListener('hashchange', update);

  return {
    on(pattern, handler) {
      // ……注册逻辑
    },
    dispatch,
    start() {
      update(); // 初始化匹配一次
    }
  };
};

可选：支持嵌套路由前缀（复用闭包链）

若想支持子路由器（如 adminRouter 只处理 /admin/* 下的路径），可用高阶函数返回新路由器，并在闭包中捕获父级前缀：

const createSubRouter = (prefix) => {
  const routes = [];
  
  return {
    on(path, handler) {
      routes.push({ path: prefix + path, handler });
    },
    dispatch(fullUrl) {
      const url = new URL(fullUrl, location.origin);
      const pathname = url.pathname;
      for (const { path, handler } of routes) {
        if (pathname.startsWith(path)) {
          handler({ pathname: pathname.slice(path.length) || '/' });
          break;
        }
      }
    }
  };
};

const adminRouter = createSubRouter('/admin');
adminRouter.on('/users', () => console.log('管理用户'));

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南