javascript - 缓存与 .querySelector

Question

关闭。这个问题是 opinion-based 。目前不接受答案。

---

想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 .

已关闭 7 年前。

Improve this question

我们很早就被教导要缓存选择器。他们都说，只需进行一次查找即可。

我想知道这个想法如何与 .querySelector 一起使用。

假设我想抓取我刚刚单击的元素下方的一个元素。 js 应该是这样的:

this.querySelector('.toggle-this-content').classList.toggle('open')

因此，我单击一个按钮，它会切换其下方的内容以打开。这是一个昂贵的选择吗？我可能应该正确地进行委托(delegate)，所以我可以说:

toggleThisContent.classList.toggle('open')

在我正在使用的函数内，但我想知道使用 .querySelector 是否是不好的做法或A-Ok。

Answer 1

你使用了“昂贵”这个词，并且你使用了“糟糕的做法”这个词。然而，两者并不是同义词。有些东西可能很昂贵，但却是很好的做法；或者便宜但不好的做法。或者，您可以重新定义“昂贵”这个词，不仅意味着某件事需要大量的 CPU 周期，还意味着需要大量的人工周期来编写、读取、调试、扩展和维护。

考虑以下因素:

function foo(sel) { 
  if (document.querySelector(sel)) document.querySelector(sel).classList.add('bar');
}

正如您所建议的，大多数有经验的程序员可能更喜欢

function foo(sel) { 
  let elt = document.querySelector(sel);
  if (elt) elt.classList.toggle('bar');
}

但实际上，原因与性能无关，尽管这个版本的性能可能稍好一些(我的意思是，最有可能快几十微秒)。这是优选的，因为它不重复。程序员“检索 sel 选择的元素”意图的单一方面在单个 querySelector 调用中仅表达一次。代码更短，并且不太容易出现拼写错误。看起来更具可读性。

让我们看另一种情况，其中特定的querySelector是在代码的不同部分完成的，所以

function x1() {
  document.querySelector('.c1').classList.toggle('x1');
}

function x2() {
  document.querySelector('.c1').classList.toggle('x2');
}

在这种情况下，安排只执行一个 querySelector('.c1') 需要计算元素并将其保存在可供两个调用之一使用的位置 - 就像一个简单的示例:

let x = function() {
  let elt = document.querySelector('.c1');
  return { 
    x1: function() { elt.classList.toggle('x1'); },
    x2: function() { elt.classList.toggle('x2'); }
  };
}();

x.x1();

您已成功将对 querySelector 的调用次数减少到一次，这将为您节省几十微秒，但代价是代码更加复杂。

因此，在这种情况下，在其他条件相同的情况下，如果需要查看原始代码(两个单独的函数调用)并询问将其重构为第二个片段 (IIFE) 的重要性，答案是会是，“几乎一点也不”。

这并不是说在更高级别上重构它不是一个好主意。您正在陷入将 DOM 操作代码与特定类(或在其他常见情况下，ID)绑定(bind)得太紧密的反模式。在这种模式中，程序员使用 ID 和类作为一种变量名来引用 DOM 元素，并且在需要获取实际元素的任何地方，使用 getElementById 从巨大的全局 DOM 命名空间中一遍又一遍地检索它code> 或 getElementsByClassName 或 querySelector。最好使用存储在变量中的 DOM 元素来引用 DOM 元素，并通过这些变量的 ID 或类将这些变量到特定元素的映射限制到代码某一部分中尽可能小的表面积。这不是性能问题，而是良好的代码结构问题。例如，这样您就可以在 HTML 中重命名类 c1，并且代码中只有一处需要更改。当然，这需要安排您的代码，以便变量在需要时可用。但这实际上与安排代码不使用全局变量没有什么不同 - 因为 querySelector('.c1') 是一种全局变量 - 无论如何，这是你应该做的事情。