作為 Nettuts 的編輯,我可以審查提交的教程中的大量程式碼。儘管 jQuery 已經推出多年,但我仍然最常看到一個常見的錯誤。
考慮以下程式碼:
$('.nav a').click(function() { $(this).hide(); $(this).css('color', 'red'); $(this).show(); alert('something else'); $(this).hide(); return false; });
由於多種原因,上面的程式碼太複雜。不要擔心程式碼實際上做了什麼(它是胡言亂語)。相反,我希望您查看所有對$(this)
的引用。
將 DOM 視為一個池。
將 DOM 視為一個池。還記得小時候,你會跳進水池裡找硬幣,而你的父母卻表現得好像在旁邊看著嗎?這將是我們在現實世界中的比較。
每次使用$('.someClass')
時,jQuery 都會跳到池 (DOM) 中,並蒐索該硬幣(或節點)。因此,當您在一個函數中多次引用它時,就會需要大量的潛水。或者,從現實世界的比較來看,這是浪費且不必要的。如果不需要,為什麼要呼叫 jQuery?您應該執行我們所說的“緩存”。
$('.nav a').click(function(e) { var anchor = $(this); anchor .hide() .css('color', 'red') .show(); alert('something else'); anchor.hide(); e.preventDefault(); });
這樣就乾淨多了。雖然現在現代瀏覽器引擎的速度快得令人難以置信,並且會盡可能地彌補你糟糕的編碼,但你仍然應該努力編寫高效的程式碼,並避免浪費所有精力在池中跳躍。現在,從技術上講,如果您向 jQuery 傳遞一個 DOM 節點,例如this
,它不會重新查詢 DOM。它只是傳回一個 jQuery 物件。
老實說,因為兩者之間的效能差異可以忽略不計,所以我們為自己編寫了乾淨的程式碼。
讓我們考慮一個稍微複雜一點的例子:選項卡。
$('.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。如果值是動態建立的,則只能在 JavaScript 中放置樣式。例如,如果您需要計算螢幕上元素的精確位置,您可以使用.css('left',calculatedValue)
。在這種情況下,可以將其全部匯出到外部樣式表。這給我們留下了:
$('.tabs li').click(function() { $('.tabs li').removeClass('active'); $(this).load('someHref', function() {} ); // example $(this).addClass('active'); });
接下來,我們為什麼要繼續在 DOM 中查詢.tabs li
和$(this)
?別再在泳池裡跳了。讓我們「快取」.tabs li
的位置。
var tabs = $('.tabs li'); tabs.click(function() { tabs.removeClass('active'); $(this).load('someHref', function() {} ); // example $(this).addClass('active'); });
更好了,但我們仍然呼叫$(this)
兩次,這沒什麼大不了的。但是,根據我的經驗,如果不儘早將其消滅在萌芽狀態,這個數字很快就會增加。
var tabs = $('.tabs li'); tabs.click(function() { var tab = $(this); tabs.removeClass('active'); tab.addClass('active') .load('someHref', function() {} ); // example });
另一個(優化程度稍差)選項是使用過濾。
var tabs = $('.tabs li'); tabs.click(function() { tabs.removeClass('active') .filter(this) .addClass('active') .load('someHref', function() {} ); // example });
本例的不同之處在於,我們不是引用$(this)
,而是使用filter()
方法將清單項目的集合減少到僅單擊的項.
是的,如果您在函數中多次引用$('.tabs)
,世界不會終結。如今 JavaScript 引擎速度非常快。如果您要測試數千次這樣做的效能,執行的差異可能是幾百毫秒。但問題仍然存在:你為什麼要這麼做?
$('.tabs')
是一個運行大量程式碼的實際函數。還應該注意的是,這些概念通常適用於 JavaScript,而不僅僅是 jQuery。
使用上述caching
技術為自己寫出更清晰的程式碼。
以上是新手友善建議:不要深入 jQuery的詳細內容。更多資訊請關注PHP中文網其他相關文章!