jquery - Jquery最佳实践，在附加事件之前检查按钮/链接是否存在

Question

我有一个带有按钮和链接的网页，可能存在也可能不存在。我有运行并将click事件分配给这些按钮和链接的 jQuery。

在我尝试附加或任何其他事件之前不检查按钮或链接是否存在是不好的做法吗？click有什么影响？

如果我应该检查按钮和链接是否存在，最佳实践是什么技术？像这样检查长度 -$('myButton').length != 0或其他方式？

score 10 · Accepted Answer

绝对没有必要提前检查，除非你需要做一些不同的事情，如果它不存在的话。

假设您可能有也可能没有带有idvalue的按钮"myButton"。如果你这样做：

$("#myButton").click(function() { /* ..... */ });

...并且该按钮不存在，没有连接处理程序。这实际上是一个无操作。

另一种方法是这样做：

var btn = $("#myButton");
if (btn.length !== 0) {
    btn.click(function() { /* ... */ });
}

...这不会为您节省任何东西（您仍然需要查看 DOM），但确实涉及更多代码。

这是 jQuery 的“集合论”方法的一大优点：如果集合为空，对集合的操作不会失败，它们只是什么都不做。

score 2 · Accepted Answer

在不包含任何元素的 jQuery 对象上调用 jQuery 函数没有任何影响，因为 jQuery 已经为您隐式处理了这个。它本质上迭代每个匹配的元素依次作用于它们，并尝试迭代一个已初始化但为空的集合将简单地导致不发生任何操作。

score 2 · Accepted Answer

$('myButton')是通过 DOM 进行搜索。定义不明确的搜索条件和超重的 DOM 可能会导致昂贵的搜索操作。

一些开发人员忘记了这一点，并对同一个搜索查询执行多个操作，例如

if ($('myButton').length !== 0) {
    $('myButton').click(...);    
}

如果$('mybutton')返回一个或多个结果，则上述搜索将运行两次。

你当然可以“优化”这个

var myButtonSearchResult = $('myButton');
if (myButtonSearchResult.length !== 0) {
    myButtonSearchResult.click(...);
}

然而，这可以通过注意到 jquery 很乐意接受对空集的操作来进一步改进：

$('myButton').click(...);

jquery 足够聪明，可以运行搜索，注意它返回并为空集，然后忽略.click().

简而言之，没有必要先检查按钮是否存在。

score 1 · Accepted Answer

无需检查按钮是否存在。如果 "#myButton" 不存在， $('#myButton').click( ... ) 不会附加任何东西，这不是坏习惯。

4 回答 4