jquery - 在 jQuery 中绑定(bind)函数之前检查元素存在的最佳方法？

Question

我一直在使用以下测试/函数对，以便仅在存在一个或多个页面元素时将函数附加到适当的页面元素:

function assistedSearch() {
    $('.assistedSearch').focus( function() {
        ...
    });
}
$(function() {
    if ( $('.assistedSearch').length > 0 ) {
        assistedSearch();
    }
});

function inputHinting() {
    $(':input.hint').each( function() {
        ...
    });
}
$(function() {
    if ( $(':input.hint').length > 0 ) {
        inputHinting();
    }
});

这是过度设计的典型案例吗？每个函数绑定(bind)之前的“if”测试是否不必要？

如果不是过度设计，是否有一种 DOM 密集程度较低的方法来确保仅将所需的功能绑定(bind)到当前页面？

Answer 1

通过执行您建议的方法，您实际上会损失性能，因为每个 if 都会查询 dom，并且您的函数会再次发出查询。

function inputHinting() {
    $(':input.hint').each( function() { //query the dom again since it was found.
        ...
    });
}
$(function() {
    if ( $(':input.hint').length > 0 ) { //Query the dom for :input.hint
        inputHinting();
    }
});

jQuery 会为您处理这个问题，因为它会确保该元素在执行操作之前就存在。话虽这么说，如果您这样做，您应该缓存您的选择器，如下所示:

function inputHinting($inputHint) {
    $inputHint.each( function() { 
        ...
    });
}
$(function() {
    var $inputHint = $(':input.hint');
    if ( $inputHint.length > 0 ) { //Query the dom for :input.hint
        inputHinting($inputHint);
    }
});

通过这样做，您只需查询 dom 一次。