首頁猿問使用$...

使用$ this代替$（this）是否可以提高性能？

JavaScript JQuery

九州編程 2019-10-21 10:25:00

假設我有以下示例：例子一$('.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)一次/兩次/三次或更多次的時間。我是不是更好的性能，明智使用例如兩個比例如一個（也許與解釋為什么或者為什么不）？編輯/注意我懷疑兩個更好。我有點擔心的是$this，我不可避免地忘記將其添加$this到事件處理程序中時，不小心引入了一個潛在的難以診斷的錯誤，而不是無意中引入了我的代碼。那么我應該使用var $this = $(this)還是$this = $(this)為此？謝謝！編輯正如Scott在下面指出的那樣，這被認為是jQuery中的緩存。http://jquery-howto.blogspot.com/2008/12/caching-in-jquery.html

查看完整描述

3 回答

catspeake

TA貢獻1111條經驗獲得超0個贊

是的，絕對可以使用$this。

每次使用時$(this)，都必須構造一個新的jQuery對象，同時$this保留相同的對象以供重用。

一個性能測試表明，$(this)是顯著慢$this。但是，由于兩者都每秒執行數百萬個操作，因此它們都不大可能產生任何實際影響，但是無論如何，重用jQuery對象是一種更好的做法。當真正的性能影響出現是當一個選擇，而不是一個DOM對象，反復傳遞給jQuery的構造-如$('p')。

至于的使用var，再次始終使用var來聲明新變量。這樣，該變量將只能在聲明它的函數中訪問，并且不會與其他函數沖突。

更好的是，jQuery設計為可與鏈接一起使用，因此請盡可能利用這一點。與其聲明一個變量并多次調用該函數，不如說：

var $this = $(this);

$this.addClass('aClass');

$this.text('Hello');

...將函數鏈接在一起，以不必要地使用附加變量：

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

反對回復 2019-10-21

郎朗坤

TA貢獻1921條經驗獲得超9個贊

轉到帶有jQuery的頁面，然后在控制臺中運行它。我知道這很糟糕，但是您可以看到$ this每次都贏了。

var time = new Date().getTime();

$('div').each(function() {

$(this).addClass('hello');

$(this).removeClass('hello');

$(this).addClass('hello');

$(this).removeClass('hello');

$(this).addClass('hello');

$(this).removeClass('hello');

$(this).addClass('hello');

$(this).removeClass('hello');

$(this).addClass('hello');

$(this).removeClass('hello');

$(this).addClass('hello');

$(this).removeClass('hello');

$(this).addClass('hello');

$(this).removeClass('hello');

});

var now = new Date().getTime();

console.log(now- time);

var var_time = new Date().getTime();

$('div').each(function() {

var $this = $(this);

$this.addClass('hello');

$this.removeClass('hello');

$this.addClass('hello');

$this.removeClass('hello');

$this.addClass('hello');

$this.removeClass('hello');

$this.addClass('hello');

$this.removeClass('hello');

$this.addClass('hello');

$this.removeClass('hello');

$this.addClass('hello');

$this.removeClass('hello');

$this.addClass('hello');

$this.removeClass('hello');

});

var var_now = new Date().getTime();

console.log(var_now - var_time);

反對回復 2019-10-21

夢里花落0921

TA貢獻1772條經驗獲得超6個贊

我無法告訴您我必須重構jQuery b / c多少次，而人們不使用緩存。

我還要補充一下人們需要學習的結合緩存的方法：

var $element = $("#elementId"),

elementLength = $element.length,

elementText = $element.text(),

someString = "someValue",

someInt = 0,

someObj = null;

代替這個：

var $element = $("#elementId");

var elementLength = $element.length;

var elementText = $element.text();

var someString = "someValue";

var someInt = 0;

var someObj = null;

反對回復 2019-10-21

3 回答
0 關注
522 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用$ this代替$（this）是否可以提高性能？

使用$ this代替$（this）是否可以提高性能？

3 回答

添加回答

使用$ this代替$（this）是否可以提高性能？

使用$ this代替$（this）是否可以提高性能？