npm 包 @nathanfaucett/query_selector_all 使用教程-JavaScript中文网-JavaScript教程资源分享门户

随着 Web 前端的发展，JavaScript 已经成为了 Web 开发不可或缺的一部分。在前端开发中，DOM 操作更是常见的任务。而常见的 DOM 操作包括而不限于查找节点、修改节点属性等。而对于查找节点来说，我们十分熟悉的就是 document.querySelector 和 document.querySelectorAll。但是它们的性能不足以满足复杂页面的需求。

而 @nathanfaucett/query_selector_all 就是一个针对大量 DOM 元素检索的高性能、轻量级的 JavaScript 库。在本文中，我们将会介绍 @nathanfaucett/query_selector_all 的使用方法，以及该库如何在提高性能方面提供帮助。

安装

@nathanfaucett/query_selector_all 可以通过 npm 来安装。

npm install @nathanfaucett/query_selector_all

使用

基础用法

@nathanfaucett/query_selector_all 主要提供了 querySelectorAll、querySelectorAllReplace、setQuerySeletorAll、setQuerySeletorAllReplace 四个方法用于查找节点。

import { querySelectorAll } from "@nathanfaucett/query_selector_all";

const container = document.getElementById("container");
querySelectorAll(".item", container); // 查询 id 为 container 的节点内所有 class 为 item 的节点

类型化数组

import { querySelectorAll } from "@nathanfaucett/query_selector_all";

const container = document.getElementById("container");
const result = querySelectorAll(".item", container, Array); // 查询 id 为 container 的节点内所有 class 为 item 的节点

在前端开发中，大部分时候我们会将查询到的 DOM 节点存储在数组里。而 @nathanfaucett/query_selector_all 提供了一个更高效的方式，即使用类型化数组。除了算法的优化，这个方式还可以提供更快的速度和更小的内存使用量。

可替换的查询

import { querySelectorAllReplace } from "@nathanfaucett/query_selector_all";

querySelectorAllReplace(); // 设置成默认行为
querySelectorAllReplace(/_$\d+\w*/g); // 替换 id 为 _1、_2、_3 的节点下的元素（默认替换 _\d+ 元素）

@nathanfaucett/query_selector_all 提供了一个特性，即在查询某些节点下的元素时，将查找到的元素入栈，替换后再替换回，从而以非递归的方式遍历整棵 DOM 树，避免查询中出现的文本内容被误判为 element。而可替换查询就是针对这一特性做的优化。通过指定一个节点匹配的表达式，通过这一特性将不想匹配的节点排除掉。

压缩空间

import { querySelectorAll } from "@nathanfaucett/query_selector_all";

const container = document.getElementById("container");
const result = querySelectorAll(".item", container, Array, true);

伴随着上文类型化数组的特性，使用此参数将会压缩类型数组的内存，并改善性能。

扩展查询

-- -------------------- ---- -------
------ - ------------------- ---------------- - ---- ------------------------------------

-------------------------- -------------- -
  ----- ---- - -----------------
  ------ -
    ---- --- ---- -- ------------- --- - -- ------------------------------- --- --
  --
---

----- --------- - -------------------------------------
----- ----------- - ------------------------ ----------- -- -- -- - --------- -----------------

如果使用者有自己的查询方法，可以采用 setQuerySeletorAll 接口替换默认的选择器行为。

过滤器函数

@nathanfaucett/query_selector_all 还提供了 filter 函数用于过滤查询的结果。

import { querySelectorAll } from "@nathanfaucett/query_selector_all";

const container = document.getElementById("container");
const itemList = querySelectorAll(".item", container); 
itemList.filter(function(item) {
  return item.style.display === "none";
}); // 过滤出所有在页面上隐藏的 item

性能调优

虽然 @nathanfaucett/query_selector_all 的性能已经非常优秀了，但是在面对比较复杂的页面时，我们还可以采用一些方式进一步提高性能。

代理模式

在 Web 开发中，有时候我们采用代理模式来管理复杂页面的状态。而 @nathanfaucett/query_selector_all 恰好支持代理模式。比如在下面这个示例中，我们只需要初始化一次 @nathanfaucett/query_selector_all，之后对这个实例的访问，都会转发到这个实例保存的节点树上。

import { make } from "@nathanfaucett/query_selector_all";

const container = document.getElementById("container");
const instance = make(container);

// 后面的查询实际上走的是 instance 的节点树上
const result = instance.querySelectorAll(".item");

优化查询选择器

虽然 @nathanfaucett/query_selector_all 已经进行了一些优化，但是仍然无法面面俱到，对于很长的、复杂的选择器仍未快捷的优化出方案。而对于这种情况，我们只要针对性地对选择器进行优化即可。

import { querySelectorAll } from "@nathanfaucett/query_selector_all";

const container = document.getElementById("container");
querySelectorAll(".parent .first-child", container);

比起下面这个 HTML 结构

<div id="container">
  <div class="parent">
    <div class="first-child"></div>
  </div>
</div>

下面这个HTML结构会有更快的性能

<div id="container">
  <div>
    <div class="parent">
      <div class="first-child"></div>
    </div>
  </div>
</div>

总结

@nathanfaucett/query_selector_all 是一个针对大量 DOM 元素检索的高性能、轻量级的 JavaScript 库。通过本教程，我们了解了该库的基本用法，以及如何进行一定的性能调优，以适应复杂场景的需求。在将 @nathanfaucett/query_selector_all 应用到项目中，我们可以通过选择合适的查询方式和优化查询选择器提高页面渲染速度，进一步优化 Web 的性能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066bcd967216659e24499a