$element.单击 vs $('元素').单击

Question

我正在尝试优化我的部分代码，我想知道我应该使用以下哪一个以及为什么，一个比另一个有什么好处？

$('element').click(function() { /* do something */ })

或

let $element = $('element')
$element.click(function() { /* do something */ })

Answer 1

它们之间的唯一区别是，在第二个中，你有一个变量，它引用了jQuery对象，你可以重用它。只有当你想重用它时，你才需要它，例如：

let $element = $("element");
$element.click(function() { /* ... */ });
if (someCondition) {
$element.addClass("whatever");
} else {
$element.find("some-child").remove();
}
// ...

重复上面的$("element")部分会更类型化一些，并且需要反复查找 DOM 中的元素并重复创建新的 jQuery 对象，这将比重用同一对象效率低。

有时你不需要变量，因为jQuery的API是为链接而设计的。(这就是为什么我扔了上面的if，所以我可以做$("element").click(/*...*/).addClass(/*...*/).find(/*...*/)等。

Answer 2

这主要取决于一个问题 - 我会再次使用该选择器吗？

如果答案是肯定的，那么是的，定义要使用的变量并将其用于.on函数，如果它只有一次，那么它会使用更多的字符来定义它，然后使用它来使用它。但是没有太大的区别(除非您选择方法1并始终重用选择器)

Answer 3

如果元素被引用一两次意味着选项1更好。 但是，如果元素被多次引用意味着选项 2更好，因为即使它被多次引用，您也只会潜入 DOM 一次，它将提高性能和良好的编码实践