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();
    }
});

这是过度工程的经典案例吗？每个函数绑定之前的“if”测试是不必要的吗？

如果没有过度工程化，是否有更少的DOM密集方式确保只将所需的功能绑定到当前页面？

Answer 1

通过执行您提出的方法，您实际上会失去性能，因为每个方法都会查询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。

Answer 2

你不应该真的关心那个。 Jquery在内部进行检查，因此您不必担心它。如果你真的必须为自己的某些原因检查它，.length属性将是你要走的路。

修改

此外，您无需执行

if ( $(':input.hint').length > 0 ){}

简单地使用以下内容是等效的

if ( $(':input.hint').length) {}

Answer 3

试试这个：

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

所以这只会查询dom一次，然后它会将jquery对象集合传递给匿名函数并执行它。

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

3 个答案: