Sizzle 源码分析 (二)：SetDocument() 方法详解

前端

2023-09-02 16:09:06

引言

在 Sizzle 源码分析系列的第二篇文章中，我们将深入探讨 setDocument() 方法。该方法在 Sizzle 的初始化过程中扮演着至关重要的角色，负责设置全局变量、优化性能并解决跨浏览器的兼容性问题。

方法概述

setDocument() 方法在 IIFE 中仅执行一次，不接受任何参数。它的作用是初始化 Sizzle，以便在整个应用程序中一致有效地查询和操作 DOM。该方法包括以下主要步骤：

1. 原生搜索方法兼容性

Sizzle 首先检查是否存在原生 querySelectorAll() 方法。如果存在，则使用原生方法进行搜索，以提高性能。否则，Sizzle 将使用自己的选择器引擎。

2. 根据兼容性设置 Expr 对象

Expr 对象存储了与浏览器兼容性相关的各种设置。setDocument() 方法根据检测到的浏览器类型设置这些设置，以确保 Sizzle 在不同的环境中正常工作。

3. querySelectorAll 兼容性问题

某些浏览器（如 IE8）中的 querySelectorAll() 方法存在兼容性问题。setDocument() 方法检测并解决这些问题，确保 Sizzle 在所有浏览器中都能正确使用。

4. 排序设置

Sizzle 支持通过 sortDetached 选项对查询结果进行排序。setDocument() 方法根据用户指定的设置，设置 sortDetached 变量，从而启用或禁用排序。

具体实现

以下是 setDocument() 方法的伪代码实现：

function setDocument() {
  // 检查是否存在原生 querySelectorAll 方法
  if (document.querySelectorAll) {
    useNative = true;
  }

  // 设置 Expr 对象的兼容性设置
  Expr.attrHandle = {...}; // 设置属性处理程序
  Expr.match = {...}; // 设置选择器匹配规则

  // 解决 querySelectorAll 兼容性问题
  if (!useNative) {
    fixQSA();
  }

  // 设置排序选项
  sortDetached = support.sortDetached;
}

影响

setDocument() 方法在以下方面对 Sizzle 有重大影响：