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

前端路由库是现代单页应用（SPA）的核心组件之一，它通过管理URL与视图的映射关系实现无刷新页面切换。路由库的内部实现往往结合了多种设计模式，这些模式不仅提升了代码的可维护性，还解决了动态路由、懒加载等复杂场景下的问题。

工厂模式与路由实例化

工厂模式在路由库中常用于创建路由实例。例如，Vue Router通过createRouter工厂函数隐藏了内部构造细节，允许用户通过配置对象灵活定义路由规则：

// Vue Router 工厂函数示例
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

React Router v6同样采用类似模式，通过createBrowserRouter工厂函数生成路由实例。这种模式的优势在于：

1. 封装了不同环境下的路由实现（Hash/History）
2. 统一了开发和生产环境的路由配置方式
3. 支持通过配置对象批量定义嵌套路由

策略模式与路由匹配算法

路由匹配是路由库的核心能力，策略模式在此处发挥关键作用。不同的路径匹配策略可以相互替换：

// 路由匹配策略接口
interface RouteMatcher {
  match(path: string): RouteRecord | null
}

// 精确匹配策略
class ExactMatcher implements RouteMatcher {
  constructor(private record: RouteRecord) {}
  
  match(path: string) {
    return path === this.record.path ? this.record : null
  }
}

// 动态参数匹配策略
class DynamicMatcher implements RouteMatcher {
  private pattern: RegExp
  
  constructor(private record: RouteRecord) {
    this.pattern = convertToRegExp(record.path)
  }
  
  match(path: string) {
    const match = path.match(this.pattern)
    return match ? { ...this.record, params: extractParams(match) } : null
  }
}

现代路由库如React Router采用路径优先级算法，将路由配置转换为匹配树，通过深度优先搜索确定最佳匹配。这种策略模式实现使得：

• 支持静态路由、动态路由、通配符等多种匹配规则
• 便于扩展自定义匹配逻辑
• 匹配性能优化与规则解耦

观察者模式与路由状态管理

路由状态变化需要通知多个订阅方，观察者模式是典型解决方案。Vue Router通过响应式系统实现：

// 简化的路由观察者实现
class Router {
  private currentRoute = ref<RouteLocation>()
  private listeners = new Set<Listener>()

  constructor(private history: History) {
    history.listen((location) => {
      this.currentRoute.value = createRoute(location)
      this.notify()
    })
  }

  onStateChange(listener: Listener) {
    this.listeners.add(listener)
    return () => this.listeners.delete(listener)
  }

  private notify() {
    for (const listener of this.listeners) {
      listener(this.currentRoute.value)
    }
  }
}

React Router则利用context API实现跨组件状态共享，其核心机制仍然是观察者模式：

// React Router 状态共享实现
const RouterContext = createContext()

function RouterProvider({ children }) {
  const [location, setLocation] = useState()
  
  useEffect(() => {
    const unlisten = history.listen(setLocation)
    return unlisten
  }, [])

  return (
    <RouterContext.Provider value={{ location }}>
      {children}
    </RouterContext.Provider>
  )
}

装饰器模式与路由守卫

路由守卫是路由库的重要功能，装饰器模式可以优雅地实现权限控制、数据预取等横切关注点：

// 路由守卫装饰器实现
function withAuth(route: RouteRecord): RouteRecord {
  return {
    ...route,
    beforeEnter: async (to, from, next) => {
      const isAuthenticated = await checkAuth()
      isAuthenticated ? next() : next('/login')
    }
  }
}

// 使用装饰器
const routes = [
  withAuth({
    path: '/dashboard',
    component: Dashboard
  })
]

实际路由库中常见的守卫类型包括：

1. 全局守卫（router.beforeEach）
2. 路由独享守卫（beforeEnter）
3. 组件内守卫（beforeRouteEnter）
4. 异步组件加载守卫（loadComponent）

组合模式与嵌套路由

嵌套路由通过组合模式构建树形结构，父路由作为容器管理子路由渲染：

// React Router 嵌套路由配置
const routes = [
  {
    path: '/user',
    element: <UserLayout />,
    children: [
      { path: 'profile', element: <Profile /> },
      { path: 'settings', element: <Settings /> }
    ]
  }
]

// 路由渲染时递归处理
function renderRoutes(routes) {
  return routes.map(route => (
    <Route
      key={route.path}
      path={route.path}
      element={route.element}
    >
      {route.children && renderRoutes(route.children)}
    </Route>
  ))
}

Vue Router通过<router-view>嵌套实现类似功能，其核心设计要点包括：

• 路由配置的树形结构序列化
• 路由匹配时的全路径计算
• 组件渲染时的层级关系维护

代理模式与路由懒加载

代理模式在路由懒加载中发挥重要作用，延迟加载实际组件直到需要渲染：

// 路由懒加载代理实现
function lazyLoadComponent(loader) {
  let component = null
  
  return {
    load: async () => {
      if (!component) {
        component = await loader()
      }
      return component
    },
    // 代理实际组件的方法
    render: (props) => {
      return component ? component.render(props) : null
    }
  }
}

// 使用示例
const routes = [
  {
    path: '/heavy',
    component: lazyLoadComponent(() => import('./HeavyComponent'))
  }
]

现代路由库通常内置支持动态导入：

// Vue Router 懒加载
const routes = [
  {
    path: '/admin',
    component: () => import('./Admin.vue')
  }
]

// React Router v6 懒加载
const router = createBrowserRouter([
  {
    path: '/',
    lazy: () => import('./Root')
  }
])

备忘录模式与路由历史管理

路由历史堆栈管理需要备忘录模式支持前进/后退导航：

// 简化的历史管理器
class RouterHistory {
  private stack: Location[] = []
  private currentIndex = -1

  push(location: Location) {
    this.stack = this.stack.slice(0, this.currentIndex + 1)
    this.stack.push(location)
    this.currentIndex++
  }

  go(n: number) {
    const newIndex = this.currentIndex + n
    if (newIndex >= 0 && newIndex < this.stack.length) {
      this.currentIndex = newIndex
      return this.stack[this.currentIndex]
    }
  }

  // 实现备忘录接口
  saveState(): HistoryState {
    return {
      stack: [...this.stack],
      index: this.currentIndex
    }
  }

  restoreState(state: HistoryState) {
    this.stack = state.stack
    this.currentIndex = state.index
  }
}

实际路由库中的历史管理更复杂，需要考虑：

• Hash模式与History API的差异处理
• 滚动位置恢复
• 历史状态序列化
• 内存中的历史记录限制

责任链模式与中间件机制

高级路由库通过责任链模式实现插件系统，Express风格的中间件机制是典型实现：

// 路由中间件责任链
class MiddlewarePipeline {
  private middlewares: Middleware[] = []

  use(middleware: Middleware) {
    this.middlewares.push(middleware)
  }

  async execute(context: Context) {
    let index = 0
    const next = async () => {
      if (index < this.middlewares.length) {
        const middleware = this.middlewares[index++]
        await middleware(context, next)
      }
    }
    await next()
  }
}

// 在路由中的使用
const pipeline = new MiddlewarePipeline()
pipeline.use(async (ctx, next) => {
  console.log('Middleware 1 start')
  await next()
  console.log('Middleware 1 end')
})

router.beforeEach((to, from, next) => {
  pipeline.execute({ to, from }).then(() => next())
})

这种模式使得路由库可以支持：

• 请求日志记录
• 性能监控
• 异常处理
• 数据预取
• 渐进式功能增强

状态模式与导航生命周期

路由导航过程本质上是状态转换，状态模式可以清晰建模这一过程：

// 导航状态机实现
interface NavigationState {
  confirmTransition(): Promise<void>
  abort(reason?: any): void
  complete(): void
}

class IdleState implements NavigationState {
  // 初始状态实现
}

class ConfirmingState implements NavigationState {
  // 等待守卫确认状态
}

class CompletingState implements NavigationState {
  // 导航完成状态
}

class NavigationController {
  private state: NavigationState = new IdleState()

  navigateTo(location: Location) {
    this.state = new ConfirmingState()
    try {
      await this.state.confirmTransition()
      this.state = new CompletingState()
      this.state.complete()
    } catch (error) {
      this.state.abort(error)
    } finally {
      this.state = new IdleState()
    }
  }
}

实际导航过程涉及更多状态：

1. 取消中的导航（当新导航打断进行中的导航）
2. 重定向状态
3. 错误处理状态
4. 异步组件加载状态

适配器模式与多平台支持

路由库需要适配不同运行环境，适配器模式在此场景非常适用：

// 抽象路由接口
interface RouterPlatform {
  push(path: string): void
  replace(path: string): void
  listen(callback: Listener): () => void
}

// 浏览器History适配器
class BrowserHistoryAdapter implements RouterPlatform {
  // 实现History API接口
}

// Node.js环境适配器
class ServerHistoryAdapter implements RouterPlatform {
  // 实现服务端路由接口
}

// 测试环境适配器
class MemoryHistoryAdapter implements RouterPlatform {
  // 实现内存路由接口
}

// 根据环境选择适配器
function createPlatformAdapter() {
  if (typeof window !== 'undefined') {
    return new BrowserHistoryAdapter()
  } else if (process.env.NODE_ENV === 'test') {
    return new MemoryHistoryAdapter()
  } else {
    return new ServerHistoryAdapter()
  }
}

现代路由库通常需要处理的环境差异包括：

• 浏览器History API与Hash模式的差异
• SSR环境下的特殊处理
• 原生应用内的混合路由（如React Native）
• 测试环境的内存路由