这两个jQuery代码行是否相同？

我很好奇，如果下面的两个代码示例是等价就性能而言：这两个jQuery代码行是否相同？

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对象？

来源

2015-02-24 dipole_moment

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

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

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

没有别的东西（在那个代码中）会碰到这个变量。

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

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

如果对象被重新使用，那么这将是来自另一参考它（即，不被复制到变量$logo参考）。

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

首先优化可读性和维护。

当您担心速度问题时，请使用一个分析器并找出您的代码真的很慢而不是担心这样的小事。

来源

2015-02-24 17:25:10 Quentin

是的，它们是等效的。如果您要再次在代码中使用相同的选择器，则使用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 
      }); 
    }

来源

2015-02-24 17:23:20

http://jsperf.com/ns-jq-cached/3 – javinor 2015-02-24 17:41:53

两种方法都是相同的。如果你想在同一个jQuery元素上做更多的操作（例如$（“h1.logo”）），建议使用第一个选项。在这种情况下，将使用本地参考副本。现在考虑这个例子，两者都是相同的，第二个选项$("h1.logo")返回一个jquery元素的实例，与第一种方法相同。

来源

2015-02-24 17:24:28 Vaibhav

是的，那是一样的。你只是把一个jQuery对象放在一个变量中。对于$，有些人更愿意将美元符号与变量放在一起，以区分常规变量和jQuery对象。

来源

2015-02-24 17:26:24 Pasoum

首先，如前面的答案所述，如果您要再次使用该元素，请将其分配一次给本地变量。分配单个变量相对可以忽略不计，所以我不担心它。首先让你的代码可读！

您的问题的答案将取决于解释器而不是jQuery。 V8在代码上运行了很多优化，我猜这将是其中的一个，但这需要查看它...

如果要测试各种解释器的性能，只需使用http://jsperf.com/ :)

来源

2015-02-24 17:33:10 javinor

这两个jQuery代码行是否相同？

回答

相关问题