使用$ this代替$(this)可以提供性能提升吗?

编程入门 行业动态 更新时间:2024-10-21 18:35:38
本文介绍了使用$ this代替$(this)可以提供性能提升吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

假设我有以下示例:

示例一

$('.my_Selector_Selected_More_Than_One_Element').each(function() { $(this).stuff(); $(this).moreStuff(); $(this).otherStuff(); $(this).herStuff(); $(this).myStuff(); $(this).theirStuff(); $(this).children().each(function(){ howMuchStuff(); }); $(this).tooMuchStuff(); // Plus just some regular stuff $(this).css('display','none'); $(this).css('font-weight','bold'); $(this).has('.hisBabiesStuff').css('color','light blue'); $(this).has('.herBabiesStuff').css('color','pink'); }

现在,它可能是:

示例二

$('.my_Selector_Selected_More_Than_One_Element').each(function() { $this = $(this); $this.stuff(); $this.moreStuff(); $this.otherStuff(); $this.herStuff(); $this.myStuff(); $this.theirStuff(); $this.children().each(function(){ howMuchStuff(); }); $this.tooMuchStuff(); // Plus just some regular stuff $this.css('display','none'); $this.css('font-weight','bold'); $this.has('.hisBabiesStuff').css('color','light blue'); $this.has('.herBabiesStuff').css('color','pink'); }

这一点不是实际代码,而是使用 $(this)当它被使用超过一次/两次/三次或更多时。

The point isn't the actual code, but the use of $(this) when it is used more than once/twice/three times or more.

我的表现更好 - 明智地使用示例二而不是示例一(可能有解释原因或原因)?

Am I better off performance-wise using example two than example one (maybe with an explanation why or why not)?

编辑/注意

我怀疑两个是更好的一个;我有点担心的是用 $ this 来编写我的代码,并且当我不可避免地忘记添加 $ this 到一个事件处理程序。那么我应该使用 var $ this = $(this),或 $ this = $(this)吗?

I suspect that two is better one; what I was a little fearful of was peppering my code with $this and than inadvertently introducing a potentially difficult-to-diagnosis bug when I inevitably forget to add the $this to an event handler. So should I use var $this = $(this), or $this = $(this) for this?

谢谢!

编辑

正如Scott指出的那样,这被认为是jQuery中的缓存。

As Scott points out below, this is considered caching in jQuery.

jquery-howto.blogspot/2008/12/caching-in-jquery.html

Jared

推荐答案

是的,绝对要使用 $ this 。

每次使用 $(this)时,必须构造一个新的jQuery对象,而 $ this 保留相同的对象以供重复使用。

A new jQuery object must be constructed each time you use $(this), while $this keeps the same object for reuse.

A 性能测试显示 $(this)显着 慢于 $ this 。但是,由于两者都在一秒钟内执行数百万次操作,因此不太可能产生任何实际影响,但最好还是重复使用jQuery对象。 真正的性能影响出现的地方是将选择器而不是DOM对象重复传递给jQuery构造函数 - 例如 $('p')。

A performance test shows that $(this) is significantly slower than $this. However, as both are performing millions of operations a second, it is unlikely either will have any real impact, but it is better practice to reuse jQuery objects anyway. Where real performance impacts arise is when a selector, rather than a DOM object, is repeatedly passed to the jQuery constructor - e.g. $('p').

至于使用 var ,再次始终使用 var 来声明新变量。通过这样做,变量只能在声明它的函数中访问,并且不会与其他函数冲突。

As for the use of var, again always use var to declare new variables. By doing so, the variable will only be accessible in the function it is declared in, and will not conflict with other functions.

更好的是,jQuery旨在与链接一起使用,因此尽可能利用这一点。而不是多次声明变量和调用函数:

Even better, jQuery is designed to be used with chaining, so take advantage of this where possible. Instead of declaring a variable and calling functions on it multiple times:

var $this = $(this); $this.addClass('aClass'); $this.text('Hello');

...将函数链接在一起,以便使用一个不必要的附加变量:

...chain the functions together to make the use of an additional variable unecessary:

$(this).addClass('aClass').text('Hello');

更多推荐

使用$ this代替$(this)可以提供性能提升吗?

本文发布于:2023-10-29 03:51:27,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1538639.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:性能

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!