我一直在使用以下测试/函数对,以便仅在存在一个或多个页面元素时将函数附加到适当的页面元素:
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)到当前页面?
最佳答案
通过执行您建议的方法,您实际上会损失性能,因为每个 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 一次。
关于jquery - 在 jQuery 中绑定(bind)函数之前检查元素存在的最佳方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5180377/