Javascript 呼叫$find是一个相对昂贵的操作吗？

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

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

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

相比

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

我觉得在前一段中可能会有一个勾稽，但我不知道为什么会有勾稽。此外，如果有

$find（）

的任何寻道时间。。在开始时找到保证“找到”2次以上的所有变量，然后使用一个实例是否更有效

编辑：

var radListBox1ID=“”；
var radListBox=$find（radListBox1ID）；
警报（radListBox.get_id（））//警报RadListBox1.ClientID

第一个没有像您预期的那样工作，因为foo不会在点击的

工具栏中定义<文档准备好后，code>foo

将在回调函数中设置。

假设您询问是否使用

$（）

查询DOM一次或多次（每个语句一次）

是，如果在同一范围内多次使用元素，则使用单个

$（）

并将结果存储在变量中，而不是在每个语句中调用jQuery，效率更高

这在事件处理程序中特别有用，在事件处理程序中，您多次将

This

作为jQuery对象引用

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

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

---

首先，您觉得在第一个示例中有一个问题，事实上，有一个问题：您在本地上下文中声明了

foo

变量，而您的

onBarClicked

函数无权访问该变量。如果您尝试使用它，将得到一个未定义的错误。要解决该问题，请在全局范围内声明

foo

：

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

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

---

但是，如果您只根据元素的ID搜索元素，那么老实说，它可能不会有多大区别。当你有一个复杂的选择器，它涉及到属性选择器、伪元素、子代组合器等等的时候，它才是真正重要的。您肯定希望保存该结果，而不是一次又一次地运行它。

我推荐以下方法：

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

});

---

…我想，

$find

您的意思是

$

。。。$find不正常吗？我的代码中到处都有它。也许是Telerik的jQuery扩展提供了它。。。请稍等。您是在ASP.NET中开发的吗

$find

不是jQuery核心的一部分，但它是作为ASP.NET Ajax的一部分提供的。对就这样。谢谢你的推荐。我编辑了帖子标签以使其更合适，并将添加对我帖子的引用。呃，是的。你说得对。一秒钟后，我将进行编辑以反映正确的声明。这样，每个元素调用$（）两次。您的代码提供了什么优势？@Sonny您可以任意多次执行

$（nav）

——该表达式仅基于现有DOM引用创建一个jQuery实例（不涉及性能损失）。您希望避免多次查询同一选择器（如

$（“#导航”）

）。与包装DOM引用不同，选择器查询会带来性能损失。当您说“在同一范围内”时，这是否意味着在全局范围内查找和分配变量，然后在局部范围内使用它们是一种不好的做法？原因是什么？只是与代码的混乱程度相比，它的好处微不足道吗？它更像是一个关于干净javascript外观的风格评论，越能将范围污染最小化越好

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

});