javascript - $element.click 与 $('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(/*...*/) 等)