Vue.js

Appearance

On this page

3. 设计思想：从路径字符串到正则表达式的转换之旅 ​

在前面的章节中，我们已经熟悉了 path-to-regexp 的“是什么”（核心 API）和“怎么用”（路径语法）。现在，我们将进入一个更深的层次，探讨“如何实现”它。本章将从设计的角度，为你揭示 path-to-regexp 背后的核心思想。你会发现，它并不仅仅是一系列正则表达式的巧妙拼接，而是一个遵循经典编译原理的、设计优雅的微型编译器。

3.1. 回顾挑战：路径匹配的复杂性 ​

让我们再次回顾一下 path-to-regexp 需要解决的问题。它需要处理：

  • 静态的文本片段。
  • 动态的命名参数（如 :id）。
  • 各种修饰符（?, *, +）。
  • 用户自定义的正则表达式模式（如 (\d+)）。
  • 以及以上所有元素的任意组合。

如果让你来设计一个函数，将 /a/:p1(\d+)?/b/:p2* 这样的复杂模式转换成一个正确的正则表达式，你会怎么做？

一个朴素的想法可能是使用大量的字符串替换和拼接。但很快你就会发现，随着组合规则的增多，代码会变得越来越难以维护，充满了各种 if/else 的补丁，最终成为一场噩梦。我们需要一个更系统、更具扩展性的方法。

3.2. 编译原理的启发：一个微型编译器的视角 ​

解决这个问题的钥匙，隐藏在编译原理的经典思想中。我们可以将 path-to-regexp 的转换过程，完全类比为一个微型编译器的工作流程：

  • 源代码 (Source Code): 我们手写的路径字符串，例如 /user/:id?。
  • 目标代码 (Target Code): 我们期望生成的正则表达式，例如 /^\/user(?:\/([^\/]+?))?\/?$/i。

编译器的经典工作流程通常分为三步：

  1. 词法分析 (Lexical Analysis): 将源代码的字符流，分解成一个个有意义的、最小的单元。这些单元被称为 Token。
  2. 语法分析 (Syntactic Analysis): 根据语言的语法规则，将 Token 序列组合成一个结构化的、树状的中间表示，通常称为抽象语法树（AST）。
  3. 代码生成 (Code Generation): 遍历抽象语法树，将这个中间表示翻译成最终的目标代码。

path-to-regexp 精巧地借鉴了这个思想。它将整个转换过程分解，引入了一个至关重要的中间表示——Token 数组。

3.3. 核心中间表示：Token ​

Token 是解耦“输入”（路径字符串）和“输出”（正则表达式）的桥梁。它是一个结构化的数据，能够精确地描述路径模式的每一个组成部分。一旦我们将路径字符串转换成了 Token 数组，后续的任何操作都只需要跟这个清晰、规范的数据结构打交道，而无需再关心原始的、复杂的字符串。

在 path-to-regexp 中，一个 Token 可以是一个简单的字符串（代表静态路径），也可以是一个描述动态参数的复杂对象。让我们来看一个简化的 Token 对象结构：

typescript
// 简化的 Token 结构示例
interface Token {
  type: 'PATH' | 'PARAM';
  value: string;
  modifier?: '?' | '*' | '+';
  pattern?: string; // for custom regex, e.g., '\d+'
}

现在，让我们用一个具体的例子，看看 /user/:id(\d+)? 是如何被 parse 函数（词法分析器）转换成 Token 数组的：

  • Input: /user/:id(\d+)?

  • Output (Tokens):

    json
    [
  {
    "type": "PATH",
    "value": "/user"
  },
  {
    "type": "PARAM",
    "value": "id",
    "modifier": "?",
    "pattern": "\\d+"
  }
]

看到这个 Token 数组，路径的结构瞬间变得清晰无比：

  • 第一部分是一个值为 /user 的静态路径。
  • 第二部分是一个参数，它的名字是 id，它是可选的（modifier: "?"），并且它有一个自定义的匹配模式 \d+。

这个 Token 数组就是我们的中间表示（IR）。它完美地、无歧义地描述了原始路径字符串的所有信息。

3.4. 实现蓝图：两步走的策略 ​

有了 Token 这个强大的中间表示，path-to-regexp 的核心实现蓝图也随之浮出水面。整个过程被清晰地分解为两步：

第一步：parse(path) -> Token[]

我们需要实现一个 parse 函数。它的职责就是扮演“词法分析器”和“语法分析器”的角色，接收一个路径字符串，返回一个 Token 数组。这是后续所有功能的基础。我们将在后续章节中看到，这个函数是通过一个巧妙的正则表达式和循环来实现的。

第二步：tokensToRegexp(tokens) -> RegExp

接下来，我们需要实现一个 tokensToRegexp 函数。它的职责是扮演“代码生成器”的角色。它接收 Token 数组，遍历它，并根据每个 Token 的类型和属性，将它们“翻译”成一小段正则表达式字符串，最后将所有片段拼接起来，生成最终的 RegExp 对象。

因此，pathToRegexp(path) 函数的内部实现，本质上就是 tokensToRegexp(parse(path)) 的一次组合调用。

通过引入 Token 和“两步走”的策略，path-to-regexp 将一个复杂的问题分解成了两个独立的、更简单的问题，完美地体现了分层和解耦的设计思想。在接下来的“核心实现”部分，我们将亲手实现 parse 和 tokensToRegexp 这两个核心函数，将今天描绘的蓝图变为现实。

在 GitHub 上编辑此页