实现一个简单的路由 (Router)

推荐答案

// www.javascriptcn.com code example
class Router {
  constructor() {
    this.routes = {};
    this.currentUrl = '';
    this.history = [];
    this.currentIndex = this.history.length - 1;
    this.backOff = false;

    window.addEventListener('load', this.refresh.bind(this), false);
    window.addEventListener('hashchange', this.refresh.bind(this), false);
  }

  route(path, callback) {
    this.routes[path] = callback || function() {};
  }

  refresh() {
    this.currentUrl = location.hash.slice(1) || '/';
    if (!this.backOff) {
      this.history.push(this.currentUrl);
      this.currentIndex++;
    }
    this.routes[this.currentUrl]();
    this.backOff = false;
  }

  back() {
    this.backOff = true;
    if (this.currentIndex > 0) {
      this.currentIndex--;
      location.hash = `#${this.history[this.currentIndex]}`;
    }
  }
}

// 使用示例
const router = new Router();

router.route('/', () => {
  console.log('Home Page');
});

router.route('/about', () => {
  console.log('About Page');
});

router.route('/contact', () => {
  console.log('Contact Page');
});

// 模拟导航
location.hash = '#/about'; // 输出: About Page
location.hash = '#/contact'; // 输出: Contact Page

// 模拟后退
router.back(); // 输出: About Page

本题详细解读

1. 路由的基本概念

路由（Router）是前端开发中用于管理页面导航的机制。它允许开发者根据URL的变化来加载不同的页面内容，而无需重新加载整个页面。通常，路由的实现依赖于浏览器的hash或history API。

2. 代码结构解析

• 构造函数 constructor：初始化路由对象，监听load和hashchange事件，确保页面加载或URL变化时能够正确触发路由逻辑。
• route 方法：用于注册路由路径及其对应的回调函数。当URL匹配到某个路径时，对应的回调函数将被执行。
• refresh 方法：在URL变化时被调用，解析当前URL并执行对应的回调函数。同时，记录路由历史以便实现后退功能。
• back 方法：实现路由的后退功能，通过修改location.hash来模拟浏览器的后退行为。

3. 使用场景

• 单页应用（SPA）：在单页应用中，路由用于管理不同视图的切换，而不需要重新加载页面。
• 导航管理：通过路由可以实现页面的前进、后退等导航功能，提升用户体验。

4. 注意事项

• 兼容性：本实现基于hash路由，适用于不支持history API的旧版浏览器。如果需要更现代的解决方案，可以考虑使用history.pushState和popstate事件。
• 性能优化：在实际应用中，路由的实现可能需要考虑性能优化，例如懒加载、路由守卫等。

通过以上代码和解析，你可以实现一个简单的前端路由，并理解其背后的工作原理。