手写 Hash Router：从原理到实现

一、Hash Router 的核心原理

1.1 URL 哈希机制解析

URL 的哈希部分（# 后的内容）是浏览器特有的功能，其核心特性包括：

• 不触发页面刷新：修改哈希值不会向服务器发送请求
• 历史记录管理：浏览器会自动将哈希变化记录到历史栈中
• 监听机制：通过 window.onhashchange 事件可捕获哈希变化

现代浏览器中，哈希值可通过 location.hash 属性获取和修改。例如：

// 获取当前哈希值（包含#）
console.log(location.hash); // 输出 "#/home"
// 修改哈希值（不刷新页面）
location.hash = '#/about';

1.2 路由系统基础架构

一个完整的 Hash Router 需要包含三个核心模块：

1. 路由监听器：持续监测哈希值变化
2. 路由匹配器：将哈希路径映射到对应组件
3. 渲染控制器：根据匹配结果更新页面内容

二、核心功能实现

2.1 路由监听机制

class HashRouter {
  constructor() {
    this.routes = {};
    this.currentPath = '';
    // 初始化监听
    window.addEventListener('hashchange', () => {
      this.currentPath = location.hash.slice(1) || '/';
      this.render();
    });
    // 处理初始加载
    if (!location.hash) {
      location.hash = '/';
    }
  }
}

关键点说明：

• 使用 slice(1) 去除哈希值的 # 符号
• 初始加载时设置默认路由，避免空白页面
• 事件监听需在构造函数中立即绑定

2.2 路由注册系统

// 在类中添加方法
register(path, component) {
  this.routes[path] = component;
}
// 使用示例
const router = new HashRouter();
router.register('/home', HomeComponent);
router.register('/about', AboutComponent);

实现要点：

• 采用键值对存储路由配置
• 支持静态路径匹配（如 /home）
• 后续可扩展动态路由（如 /user/:id）

2.3 动态渲染引擎

render() {
  const Component = this.routes[this.currentPath] || this.routes['/404'];
  const container = document.getElementById('app');
  // 清空容器并渲染新组件
  container.innerHTML = '';
  if (Component) {
    const instance = new Component();
    container.appendChild(instance.render());
  } else {
    container.textContent = '404 Not Found';
  }
}

优化建议：

• 添加过渡动画支持
• 实现组件缓存机制
• 增加错误边界处理

三、高级功能扩展

3.1 动态路由实现

// 修改注册方法支持参数
register(path, component) {
  // 简单实现：将路径转换为正则
  const regex = path.replace(/:(\w+)/g, '([^/]+)');
  this.routes[path] = {
    component,
    regex: new RegExp(`^${regex}$`)
  };
}
// 匹配逻辑改进
matchRoute(path) {
  for (const [routePath, {component, regex}] of Object.entries(this.routes)) {
    const match = path.match(regex);
    if (match) {
      // 提取参数（示例简化）
      const params = {};
      routePath.replace(/:(\w+)/g, (_, key) => {
        params[key] = match[++match.index];
      });
      return { component, params };
    }
  }
  return null;
}

3.2 导航辅助方法

navigate(path) {
  location.hash = path;
}
// 带参数的导航
navigateToUser(id) {
  this.navigate(`/user/${id}`);
}

3.3 嵌套路由支持

// 路由配置示例
const routes = {
  '/dashboard': {
    component: Dashboard,
    children: {
      '/stats': StatsComponent,
      '/settings': SettingsComponent
    }
  }
};
// 修改render方法处理嵌套
render() {
  const {component: RootComponent, children} = this.resolveRoute(this.currentPath);
  // ...渲染根组件
  if (children) {
    const childPath = this.getChildPath();
    const ChildComponent = children[childPath] || children['/404'];
    // ...渲染子组件
  }
}

四、实际应用案例

4.1 基础版实现

// 组件基类
class Component {
  render() {
    const div = document.createElement('div');
    div.textContent = `This is ${this.constructor.name}`;
    return div;
  }
}
class Home extends Component {}
class About extends Component {}
// 路由初始化
const router = new HashRouter();
router.register('/', Home);
router.register('/about', About);

4.2 生产环境优化

// 添加路由守卫
beforeEach(guard) {
  const originalRender = this.render;
  this.render = function() {
    if (guard(this.currentPath)) {
      originalRender.call(this);
    } else {
      this.navigate('/login');
    }
  };
}
// 使用示例
router.beforeEach((path) => {
  return path !== '/admin' || localStorage.getItem('token');
});

五、性能优化策略

1. 路由预加载：

   // 在hashchange前预加载组件
   preloadComponent(path) {
   if (this.routes[path] && !this.loadedComponents[path]) {
    // 这里可以是动态导入或简单标记
    this.loadedComponents[path] = true;
   }
   }

2. 哈希变化防抖：

   constructor() {
   let debounceTimer;
   window.addEventListener('hashchange', () => {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
      this.handleHashChange();
    }, 100);
   });
   }

3. 内存管理：

• 实现组件卸载时的清理逻辑
• 避免内存泄漏的定时器管理
• 路由切换时的资源释放

六、完整实现示例

class HashRouter {
  constructor(options = {}) {
    this.routes = {};
    this.currentPath = '';
    this.container = options.container || 'app';
    this.beforeHooks = [];
    window.addEventListener('hashchange', () => {
      this.currentPath = location.hash.slice(1) || '/';
      this.handleRouteChange();
    });
    if (!location.hash) location.hash = '/';
  }
  register(path, component) {
    this.routes[path] = component;
  }
  use(hook) {
    this.beforeHooks.push(hook);
  }
  async handleRouteChange() {
    try {
      for (const hook of this.beforeHooks) {
        const result = await hook(this.currentPath);
        if (!result) return this.navigate('/');
      }
      this.render();
    } catch (error) {
      console.error('路由错误:', error);
      this.navigate('/error');
    }
  }
  render() {
    const Component = this.routes[this.currentPath] || this.routes['/404'];
    const container = document.getElementById(this.container);
    container.innerHTML = '';
    if (Component) {
      const instance = new Component();
      container.appendChild(instance.render ? instance.render() : instance);
    } else {
      container.textContent = '404 Not Found';
    }
  }
  navigate(path) {
    location.hash = path;
  }
}
// 使用示例
const router = new HashRouter({ container: 'root' });
router.use(async (path) => {
  // 模拟权限检查
  if (path.startsWith('/admin') && !localStorage.getItem('auth')) {
    return false;
  }
  return true;
});
router.register('/', HomeComponent);
router.register('/admin', AdminComponent);

七、总结与最佳实践

1. 初始化检查清单：

   • 设置默认路由
   • 配置错误边界处理
   • 实现路由守卫机制

2. 性能优化建议：

   • 对大型应用实现路由懒加载
   • 使用 Web Workers 处理复杂路由逻辑
   • 实现路由级别的代码分割

3. 安全注意事项：

   • 对动态路由参数进行校验
   • 防止开放重定向漏洞
   • 实现 CSRF 保护机制

4. 调试技巧：

   • 使用 console.log(location.hash) 跟踪变化
   • 实现路由日志记录
   • 使用浏览器开发者工具的 Network 面板验证

通过手写 Hash Router，开发者不仅能深入理解前端路由的工作原理，还能根据项目需求定制特殊功能。这种实现方式特别适合对包体积敏感的项目，或是需要特殊路由逻辑的定制化应用。实际开发中，建议在此基础上逐步添加状态管理、持久化存储等高级功能，构建更完整的前端解决方案。