揭秘 Sizzle 源码之 tokenize 函数与 Sizzle 函数

在 Sizzle 选择器引擎的内部机制中，tokenize 函数和 Sizzle 函数扮演着至关重要的角色，它们协同合作，将复杂的 CSS 选择器分解成易于处理的元素，为后续的选择和匹配奠定基础。

tokenize 函数

tokenize 函数是一个强大的解析器，它的职责是将 CSS 选择器字符串分解成一组标记。这些标记包含了选择器中各个组件的信息，例如元素类型、类名和 ID。

tokenize 函数采用先进的正则表达式技术，能够识别出各种选择器模式。它将选择器字符串逐一扫描，将匹配的模式捕获到标记中。

标记结构

每个标记都包含以下属性：

• type：标记的类型，例如元素类型、类名或 ID。
• value：标记的值，例如类名或 ID 的具体内容。
• negated：布尔值，表示标记是否带有否定符（:not）。

Sizzle 函数

Sizzle 函数是 tokenize 函数的忠实搭档，它负责将一组标记编译成一个可执行的选择器函数。这个函数可以快速匹配文档中的元素。

Sizzle 函数采用递归算法，将标记组合成一个表示选择器逻辑的树形结构。它逐个处理标记，并根据标记的类型和值更新树形结构。

缓存机制

Sizzle 函数采用了巧妙的缓存机制来提高性能。它将编译后的选择器函数存储在缓存中，避免了重复编译的开销。当需要使用同一选择器时，Sizzle 函数可以从缓存中快速检索编译后的函数。

协同工作

tokenize 函数和 Sizzle 函数紧密协作，为 Sizzle 选择器引擎提供强大的解析和编译能力。tokenize 函数负责识别和标记选择器组件，而 Sizzle 函数则利用这些标记构建可执行的匹配函数。

这种分工合作的机制使 Sizzle 能够高效地处理复杂的 CSS 选择器，为前端开发人员提供了强大的选择和匹配工具。

Expr.prefilter

Expr.prefilter 是 Sizzle 中的一个正则表达式预处理器。它负责对 CSS 选择器字符串进行预处理，将一些复杂的正则表达式模式替换为更简单的形式。这有助于提高 tokenize 函数的解析效率。

Expr.cacheLength

Expr.cacheLength 是一个常量，定义了 Sizzle 缓存中可存储的编译后选择器函数数量。默认值为 50，这意味着 Sizzle 最多可以缓存 50 个编译后的选择器函数。

实际应用

tokenize 函数和 Sizzle 函数在前端开发中有着广泛的应用：

• DOM 操作： 用于查找和选择特定元素。
• 事件处理： 用于指定事件监听器的目标元素。
• 动画效果： 用于控制动画效果的应用范围。

理解 tokenize 函数和 Sizzle 函数的内部机制对于编写高效和可维护的前端代码至关重要。