作為 Nettuts+ 的編輯，我可以審查提交的教程中的大量代碼。盡管 jQuery 已經(jīng)推出多年，但我仍然最?？吹揭粋€常見的錯誤。

---

示例#1

考慮以下代碼：

$('.nav a').click(function() {
  $(this).hide();
  $(this).css('color', 'red');
  $(this).show();

  alert('something else');

  $(this).hide();

  return false;
});

由于多種原因，上面的代碼過于復(fù)雜。不要擔(dān)心代碼實際上做了什么（它是胡言亂語）。相反，我希望您查看所有對 $(this) 的引用。

將 DOM 視為一個池。

將 DOM 視為一個池。還記得小時候，你會跳進(jìn)水池里尋找硬幣，而你的父母卻表現(xiàn)得好像在旁邊看著嗎？這將是我們在現(xiàn)實世界中的比較。

每次使用 $('.someClass') 時，jQuery 都會跳轉(zhuǎn)到池 (DOM) 中，并搜索該硬幣（或節(jié)點）。因此，當(dāng)您在一個函數(shù)中多次引用它時，就會需要大量的潛水。或者，從現(xiàn)實世界的比較來看，這是浪費(fèi)且不必要的。如果不需要，為什么要調(diào)用 jQuery？您應(yīng)該執(zhí)行我們所說的“緩存”。

$('.nav a').click(function(e) {
   var anchor = $(this);

   anchor
      .hide()
     .css('color', 'red')
     .show();

   alert('something else');

   anchor.hide();

   e.preventDefault();

});

這樣就干凈多了。雖然現(xiàn)在現(xiàn)代瀏覽器引擎的速度快得令人難以置信，并且會盡可能地彌補(bǔ)你糟糕的編碼，但你仍然應(yīng)該努力編寫高效的代碼，并避免浪費(fèi)所有精力在池中跳躍?，F(xiàn)在，從技術(shù)上講，如果您向 jQuery 傳遞一個 DOM 節(jié)點，例如 this，它不會重新查詢 DOM。它只是返回一個 jQuery 對象。

老實說，因為兩者之間的性能差異可以忽略不計，所以我們?yōu)樽约壕帉懥烁蓛舻拇a。

示例 2

讓我們考慮一個稍微復(fù)雜一點的例子：選項卡。

$('.tabs li').css('position', 'relative');

$('.tabs li').click(function() {
   $('.tabs li').removeClass('active');
   $(this).addClass('active');
   $(this).load('someHref', function() {} ); // example
   $(this).css('top', '1px');
});

這個代碼到處都是。它很丑陋，而且效率低下。第一個解決辦法是擺脫所有 CSS。如果值是動態(tài)創(chuàng)建的，則只能在 JavaScript 中放置樣式。例如，如果您需要計算元素在屏幕上的精確位置，您可以使用 .css('left',calculatedValue)。在這種情況下，可以將其全部導(dǎo)出到外部樣式表。這給我們留下了：

$('.tabs li').click(function() {
   $('.tabs li').removeClass('active');
   $(this).load('someHref', function() {} ); // example
   $(this).addClass('active');
});

接下來，我們?yōu)槭裁匆^續(xù)在 DOM 中查詢 .tabs li 和 .tabs li 和 $(this)？別再在泳池里跳了。讓我們“緩存” .tabs li？別再在泳池里跳了。讓我們“緩存” .tabs li 的位置。

var tabs = $('.tabs li');

tabs.click(function() {
   tabs.removeClass('active');
   $(this).load('someHref', function() {} ); // example
   $(this).addClass('active');
});

更好了，但我們?nèi)匀徽{(diào)用 $(this) 兩次，這沒什么大不了的。但是，根據(jù)我的經(jīng)驗，如果不盡早將其消滅在萌芽狀態(tài)，這個數(shù)字很快就會增加。

var tabs = $('.tabs li');

tabs.click(function() {
   var tab = $(this);
   tabs.removeClass('active');
   tab.addClass('active')
     .load('someHref', function() {} ); // example
});

過濾

另一個（優(yōu)化程度稍差）選項是使用過濾。

var tabs = $('.tabs li');

tabs.click(function() {
   tabs.removeClass('active')
       .filter(this)
       .addClass('active')
       .load('someHref', function() {} ); // example
});

本例的不同之處在于，我們不是引用 $(this)，而是使用 filter()，而是使用 filter() 方法將列表項的集合減少到僅單擊的項.

---

你應(yīng)該拿走什么

是的，如果您在函數(shù)中多次引用 $('.tabs) ，世界不會終結(jié)。如今 JavaScript 引擎速度非?？?。如果您要測試數(shù)千次這樣做的性能，執(zhí)行的差異可能是幾百毫秒。但問題仍然存在：你為什么要這么做？

有時，當(dāng)我們使用像 jQuery 這樣的大量抽象時，很容易忘記 $('.tabs') 是一個運(yùn)行大量代碼的實際函數(shù)。還應(yīng)該注意的是，這些概念通常適用于 JavaScript，而不僅僅是 jQuery。

使用上述 caching 技術(shù)為自己編寫更清晰的代碼。

以上是新標(biāo)題：jQuery新手小貼士：停止在泳池中跳躍的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！