Question

我只是想知道这两种编码风格之间的优缺点是什么：

var foo;
$(document).ready( function() {
    foo = $find(fooID);
});

function OnBarClicked()
{
    foo.doStuff();
    foo.doMoreStuff();
}

与

相比

function OnBarClicked()
{
    $find(fooID).doStuff();
    $find(fooID).doMoreStuff();
}

我觉得前者可能有问题，但我不知道为什么会有问题。另外，如果$find()有任何寻道时间，那么找到所有保证在开始时“找到”2次以上的变量会更有效率，然后使用一个实例吗？

编辑：$find description and usage

var radListBox1ID = "<%= RadListBox1.ClientID %>";
var radListBox = $find(radListBox1ID);
alert(radListBox.get_id()); //Alerts RadListBox1.ClientID

Answer 1

假设您询问是否使用$()查询DOM与多次（每个语句一次）...

是，使用单个$()并将结果存储在变量中更为高效，而不是在每个语句上调用jQuery如果您在同一范围内多次使用该元素 ...

这在多次将this作为jQuery对象引用的事件处理程序中特别有用。

$('#element').click(function(e) {
    var $clicked = $(this);

    $clicked.doStuff();
    $clicked.doMoreStuff();
});

Answer 2

首先，你觉得第一个例子中有一个问题，而且确实有：你在foo函数没有的本地上下文中声明onBarClicked变量进入。如果您尝试使用它，您将收到未定义的错误。要解决该问题，请在全局范围内声明foo：

var foo;
$(document).ready(function () {
    foo = $(fooID);
});

说到你的实际问题，简短的回答是：是的。运行一次搜索并存储结果会更快。

但是如果你只是通过它的ID来搜索一个元素，那么说实话，它可能不会产生太大的影响。真正重要的时候是你有一个复杂的选择器，涉及属性选择器或伪元素或后代组合器或东西。您肯定希望保存该结果，而不是一次又一次地运行它。

Answer 3

第一个不能按预期工作，因为foo不会在OnBarClicked中定义。文档准备好后，foo将在回调函数中设置。

Answer 4

我推荐这种方法：

$( function () {

    // get all the references (to the DOM elements) ASAP
    var header = $( '#header' )[0],
        nav = $( '#navigation' )[0],
        toolbar = $( '#toolbar' )[0];
        // etc.

    // now whenever you need to work with a referenced DOM element
    // just wrap it inside a jQuery object
    $( nav ).click( function () { ... });

});

调用$发现一个相对昂贵的操作？

4 个答案: