这两行jQuery是否等效

Are these two jQuery lines equivalent?

本文关键字：jQuery 是否 两行      更新时间：2024-04-19

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

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

与

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

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

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

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

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

（该代码中）任何其他内容都不会触及该变量。

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

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

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

因此，第二个版本的代码效率略高，因为它不需要花时间将值存储在变量中，然后只使用该值一次。这可能会被JavaScript编译器优化掉。不管怎样，这都是一个微不足道的变化，不值得从有效的角度来思考。

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

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

是的，它们是等价的。如果您要在代码中再次使用相同的选择器，那么使用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元素，最好像下面这样缓存选择器，这样就不会每次需要调用方法时都创建newjQuery对象。

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

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

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

首先，正如前面的答案所述，如果你要再次使用元素，一定要将其分配给一个本地变量一次。分配一个变量相对来说可以忽略不计，所以我不担心。首先要保持代码的可读性！

您的问题的答案将取决于解释器，而不是jQuery。V8在代码上运行了很多优化，我猜这将是其中之一，但这需要深入研究…

如果你想测试各种口译员的性能，只需使用http://jsperf.com/：）

相关文章：