$element.click vs $('element').click

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

如果元素被引用一两次，则意味着option1更好。但是，如果元素被多次引用，则意味着选项2更好，因为您只深入dom一次，即使它被多次引用，并且它将提高性能和良好的编码实践。