这两行 jQuery 是等价的吗？

Question

我很好奇就性能而言，以下两个代码示例是否等效：

jQuery(document).ready(function($){
      var $logo = $("h1.logo");
      $logo.on("mouseenter", function() {
        // Something
      });
}

VS

jQuery(document).ready(function($){
      $("h1.logo").on("mouseenter", function() {
        // Something
      });
}

更准确地说，jQuery 会隐式地将 $("h1.logo") 转换为变量还是会在每个 mouseenter 事件上初始化一个新的 jQuery 对象？

Answer 1

是的，它们是等价的。如果您要在代码中再次使用相同的选择器，使用 var $logo = $("h1.logo"); 实际上会更有效。您的代码将知道您的选择器在哪里，而不是再次在 DOM 中搜索。

例如，

    jQuery(document).ready(function($){
         $('h1.logo').addClass('clicked');
         var html = $('h1.logo')[0].html();
         $('h1.logo').on("mouseenter", function() {
            // Something
         });
     }

如果你要一次又一次地访问 logo 元素，最好像下面这样缓存选择器，这样你就不会每次都创建一个 new jQuery 对象需要调用方法的时间。

   jQuery(document).ready(function($){
          var $logo = $(".logo");
          $logo.addClass('clicked');
          var html = $logo[0].html();
          $logo.on("mouseenter", function() {
            // Something
          });
    }

Answer 2

两种方法都是一样的。如果您想对同一个 jquery 元素（即 $("h1.logo")）执行更多操作，建议使用第一个选项。在这种情况下，将使用本地参考副本。现在考虑这个例子，两者都是相同的，在第二个选项中 $("h1.logo") returns jquery 元素的实例，与第一种方法相同。

Answer 3

$("h1.logo") 将 return 对象的引用。

您的代码的第一个版本将该对象存储在一个名为 $logo 的变量中。

在这两种情况下，都会对该对象调用 on 方法。

其他任何东西（在该代码中）都不会触及该变量。

我不太了解 jQuery 内部结构，但据我所知，mouseenter 事件既不会重用原始 jQuery 对象也不会创建新对象。（函数内 this 的值将是 DOM 元素对象，而不是 jQuery 对象）。

无论 mouseenter 事件触发时发生什么，$logo 都不会被触及，因为它没有在事件处理函数中被引用。

如果对象被重用，那么它将来自另一个对它的引用（即不是复制到$logo变量中的引用）。

所以代码的第二个版本稍微更有效，因为它没有花时间在变量中存储一个值，然后只使用该值一次。 JavaScript 编译器可能会将其优化掉。无论哪种方式，它都是如此微小的变化，从效率的角度来看不值得考虑。

首先优化可读性和维护性。

当您担心速度时，使用分析器找出您的代码真正慢的地方，而不是担心像这样的琐碎事情。

Answer 4

是的，一样的。您只是将 jquery 对象放在变量中。对于 $，有些人更喜欢将美元符号与变量放在一起，以区分常规变量和 jQuery 对象。

Answer 5

首先，如之前的回答所述，如果您要再次使用该元素，请务必将其分配给本地变量一次。分配单个 var 相对可以忽略不计，所以我不会担心。最重要的是保持代码的可读性！

您问题的答案取决于口译员，而不是 jQuery。 V8 对代码进行了大量优化，我猜这将是其中之一，但这需要深入研究...

如果您想测试各种解释器的性能，只需使用 http://jsperf.com/ 进行测试即可：)

这两行 jQuery 是等价的吗？

Are these two jQuery lines equivalent?

javascript

jquery

performance

closures