前端路由库中的设计模式实现

路由库的核心问题与设计模式

前端路由库需要解决的核心问题是如何在不刷新页面的情况下管理应用状态与视图变化。传统多页应用依赖服务器返回新页面，而单页应用（SPA）通过路由库实现视图切换。这种场景下，观察者模式、工厂模式、策略模式等成为常见解决方案。

典型路由库如React Router的工作流程：URL变化触发路由匹配，匹配成功后渲染对应组件。整个过程涉及多个设计模式的协同工作，比如：

// React Router v6基本用法
const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: [
      {
        path: "projects",
        element: <Projects />,
        loader: () => fetchProjects(),
      }
    ]
  }
]);

观察者模式处理路由变化

浏览器历史记录变化时，需要通知所有订阅者。观察者模式将路由对象作为被观察者，路由组件作为观察者：

class Router {
  constructor() {
    this.subscribers = [];
    window.addEventListener('popstate', () => this.notify());
  }

  subscribe(component) {
    this.subscribers.push(component);
  }

  notify() {
    this.subscribers.forEach(comp => comp.update());
  }

  navigate(path) {
    history.pushState({}, '', path);
    this.notify();
  }
}

class RouteComponent {
  update() {
    // 根据当前路径重新渲染
  }
}

实际实现中，React Router通过history库的listen方法注册回调，Vue Router则通过Vue的响应式系统自动触发更新。

工厂模式创建路由实例

不同环境需要不同路由实现。浏览器环境用createBrowserRouter，服务端渲染用createMemoryRouter：

interface RouterFactory {
  createRouter(routes: RouteObject[]): Router;
}

class BrowserRouterFactory implements RouterFactory {
  createRouter(routes) {
    return createBrowserRouter(routes);
  }
}

class MemoryRouterFactory implements RouterFactory {
  createRouter(routes) {
    return createMemoryRouter(routes);
  }
}

function getRouterFactory(env: 'browser' | 'server'): RouterFactory {
  return env === 'browser' 
    ? new BrowserRouterFactory() 
    : new MemoryRouterFactory();
}

这种模式让路由库可以无缝切换运行环境，测试时也能方便地使用内存路由。

策略模式实现路由匹配

不同路由匹配策略可以相互替换。动态路由、嵌套路由、正则匹配等都可以封装为独立策略：

class PathMatcher {
  constructor(strategy) {
    this.strategy = strategy;
  }

  match(pathname) {
    return this.strategy.execute(pathname);
  }
}

class ExactMatchStrategy {
  constructor(pattern) {
    this.pattern = pattern;
  }

  execute(pathname) {
    return pathname === this.pattern;
  }
}

class DynamicMatchStrategy {
  constructor(pattern) {
    this.keys = [];
    this.regex = pathToRegexp(pattern, this.keys);
  }

  execute(pathname) {
    const match = this.regex.exec(pathname);
    if (!match) return null;
    
    return this.keys.reduce((params, key, index) => {
      params[key.name] = match[index + 1];
      return params;
    }, {});
  }
}

// 使用示例
const matcher = new PathMatcher(
  new DynamicMatchStrategy('/user/:id')
);
matcher.match('/user/123'); // { id: '123' }

React Router的matchPath函数内部就实现了多种匹配策略，支持exact、strict等配置参数。

组合模式处理嵌套路由

路由配置具有明显的树形结构，组合模式可以统一处理单个路由和路由组件的操作：

class RouteNode {
  constructor(path, component) {
    this.path = path;
    this.component = component;
    this.children = [];
  }

  add(child) {
    this.children.push(child);
  }

  remove(child) {
    const index = this.children.indexOf(child);
    if (index !== -1) this.children.splice(index, 1);
  }

  match(pathname) {
    // 递归匹配子路由
    const childResults = this.children.flatMap(child => 
      child.match(pathname)
    );
    
    if (this._matchCurrent(pathname)) {
      return [{ route: this, params: {} }, ...childResults];
    }
    
    return childResults;
  }
}

实际路由库中，React Router通过<Outlet>组件实现嵌套路由渲染，Vue Router则通过<router-view>的嵌套实现相同功能。

中间件模式增强路由功能

路由守卫、数据预加载等功能可以通过中间件模式实现：

interface RouterMiddleware {
  (context: RouteContext, next: () => Promise<void>): Promise<void>;
}

class Router {
  private middlewares: RouterMiddleware[] = [];

  use(middleware: RouterMiddleware) {
    this.middlewares.push(middleware);
  }

  async navigate(to: string) {
    const context = { to, from: currentPath };
    
    const dispatch = async (i: number) => {
      if (i >= this.middlewares.length) return;
      const middleware = this.middlewares[i];
      await middleware(context, () => dispatch(i + 1));
    };
    
    await dispatch(0);
    // 实际导航逻辑
  }
}

// 使用示例
router.use(async (ctx, next) => {
  console.log(`Navigating from ${ctx.from} to ${ctx.to}`);
  await next();
  console.log('Navigation complete');
});

Vue Router的导航守卫和React Router的数据加载器都是中间件模式的典型应用。

单例模式管理路由状态

整个应用通常只需要一个路由实例，单例模式确保全局一致性：

class RouterSingleton {
  static instance;
  
  constructor() {
    if (RouterSingleton.instance) {
      return RouterSingleton.instance;
    }
    
    this.currentRoute = null;
    RouterSingleton.instance = this;
  }
  
  // 其他路由方法
}

// 使用示例
const router1 = new RouterSingleton();
const router2 = new RouterSingleton();
console.log(router1 === router2); // true

实际实现中，React Router通过React Context跨组件共享路由状态，而不是严格的单例模式。

代理模式实现路由懒加载

组件懒加载可以通过代理模式延迟加载实际组件：

class RouteProxy {
  constructor(loader) {
    this.loader = loader;
    this.component = null;
  }

  async getComponent() {
    if (!this.component) {
      this.component = await this.loader();
    }
    return this.component;
  }
}

// 使用示例
const routes = [{
  path: '/dashboard',
  component: new RouteProxy(() => import('./Dashboard'))
}];

// 路由匹配时
const matched = routes.find(r => r.path === currentPath);
const component = await matched.component.getComponent();

现代路由库都支持这种动态导入语法，Webpack等打包工具会将其自动代码分割。

装饰器模式扩展路由功能

ES装饰器可以优雅地扩展路由功能：

function withLogging(target: any, key: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;
  
  descriptor.value = function(...args: any[]) {
    console.log(`Calling ${key} with`, args);
    return original.apply(this, args);
  };
  
  return descriptor;
}

class ProtectedRoute {
  @withLogging
  canActivate() {
    // 权限检查逻辑
  }
}

虽然ES装饰器还在提案阶段，但TypeScript已支持这种语法，Next.js等框架用它增强页面功能。

状态模式处理导航状态

路由导航过程涉及多种状态（准备中、加载中、完成、错误等），状态模式可以简化复杂的状态转换逻辑：

class NavigationState {
  constructor(router) {
    this.router = router;
  }

  start() {
    throw new Error('必须实现start方法');
  }
}

class IdleState extends NavigationState {
  start(to) {
    this.router.setState(new LoadingState(this.router));
    this.router.loadComponents(to);
  }
}

class LoadingState extends NavigationState {
  start() {
    console.warn('导航已在进行中');
  }

  componentLoaded() {
    this.router.setState(new ReadyState(this.router));
  }

  error(err) {
    this.router.setState(new ErrorState(this.router, err));
  }
}

这种模式在复杂路由场景下特别有用，比如需要处理并发导航、中断导航等情况。

路由库的性能优化实践

大型应用的路由配置可能包含数百条规则，高效匹配算法至关重要：

// 使用Trie树优化路径匹配
class RouteTrie {
  constructor() {
    this.root = { children: {}, handlers: [] };
  }

  insert(path, handler) {
    const segments = path.split('/').filter(Boolean);
    let node = this.root;
    
    for (const segment of segments) {
      if (!node.children[segment]) {
        node.children[segment] = { children: {}, handlers: [] };
      }
      node = node.children[segment];
    }
    
    node.handlers.push(handler);
  }

  search(path) {
    const segments = path.split('/').filter(Boolean);
    const params = {};
    let node = this.root;
    
    for (const segment of segments) {
      // 先尝试精确匹配
      if (node.children[segment]) {
        node = node.children[segment];
        continue;
      }
      
      // 尝试动态段匹配
      const dynamicChild = Object.entries(node.children)
        .find(([key]) => key.startsWith(':'));
        
      if (dynamicChild) {
        const [key, childNode] = dynamicChild;
        params[key.slice(1)] = segment;
        node = childNode;
        continue;
      }
      
      return null;
    }
    
    return { handlers: node.handlers, params };
  }
}

实际路由库如React Router使用类似的优化技术，同时结合缓存机制提升重复访问性能。