这两行jQuery是否等效
Are these two jQuery lines equivalent?
就性能而言,我很好奇以下两个代码样本是否等效:
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
元素,最好像下面这样缓存选择器,这样就不会每次需要调用方法时都创建new
jQuery对象。
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/:)
- JQuery是否有一个“;移动“;作用或者有没有一种更紧凑的方法来做到这一点
- angular如何确定jQuery是否存在
- 当调用.of()然后调用.on()时,Jquery是否可能将事件推迟
- jqGrid 或 jQuery 是否具有在字符串中缓存 DOM 更改的功能?
- 这两行jQuery是否等效
- jQuery-是否可以使用jQuery在隐藏的文本框中设置值
- jQuery是否满足完全匹配类的条件
- jQuery是否覆盖事件侦听器
- jQuery是否存在于当前页面中
- jQuery是否提供带有背景淡入淡出小部件的叠加层
- 如何检测动态加载时加载的jquery是否加载
- jQuery - 是否可以将鼠标悬停到另一个元素
- jQuery是否可以用JavaScript替换文本,然后执行
- JQuery 是否仍在评估选择器 RTL
- javascript 或 jQuery 是否有任何技术来创建最终用户可以即时收缩或扩展的保存对象
- jQuery:是否可以在单击时更改无ID/无类元素
- jquery是否可以在AngularJs中使用
- JQuery是否用于onclick/onchange
- 如何确定jQuery是否已完全初始化
- Jquery:是否有类似于$(document).ready()的基于元素的方法