2016-05-09 73 views
2

好這個問題似乎有點基本的,但我不知道是否應該像這些功能緩存變量:緩存的最佳做法。避免多餘的緩存?

function fooBar(target) { 
    var elem = target.children[0].children[1]; 

    if(n == 1) { 
    elem.style.color = "red"; 
    } 
    else { 
    elem.style.color = "blue"; 
    } 
} 

VS

function fooBar(target) { 
    if(n == 1) { 
    target.children[0].children[1].style.color = "red"; 
    } 
    else { 
    target.children[0].children[1].style.color = "blue"; 
    } 
} 

有沒有真正的性能提升呢?除了類型安全,我認爲後者更好,因爲我需要更少的線路。在這些情況下,究竟什麼被認爲是最佳實踐?我是否仍然需要緩存對象事件?

所以,除非我的if語句包括:

if(elem.className == "something") 

我本人來說難道不煩緩存。

另一方面,我的大腦與編碼風格/一致性有衝突。

假設我有這樣的事情:

function fooBar(target) { 
    if(n == 1) { 
    target.children[0].children[1].style.color = "red"; 
    } 
    if else (n == 2) { 
    target.children[0].children[1].style.color = "blue"; 
    } 
    if else (n == 3) { 
    target.children[0].children[1].style.color = "yellow"; 
    } 
    else { 
    target.children[0].children[1].style.color = "green"; 
    } 
} 

然後,我將不得不對象緩存由於類型安全這使我回一致性的問題...

+0

較少的行並不一定意味着較少的字節(並且必須使用兩次或三次相等來進行比較) – fcalderan

+0

當您多次使用元素時 - __always__將其緩存在變量中。當您使用DOM元素時尤其如此。 –

+0

@u_mulder更新了我的問題 – Asperger

回答

2

究竟是什麼被認爲是這些情況下的最佳做法?

「這種」情況下的「最佳實踐」是消除對數組/對象的讀取(訪問)操作。
在你的情況下,你對這兩個變體都有4個讀操作。
-爲避免多次讀取/存取操作,你應該在關鍵元素(參考)保存到一個局部變量
-爲避免多次if else語句 - 使用switch操盤手(應該走得更快)
你也應該考慮代碼可讀性代碼簡單性
但如果你需要「不太行」 - 我建議以下簡單的,可擴展的解決方案爲您的最後一個例子:

function fooBar(target) { 
    var styles = ["green", "red", "blue", "yellow"]; // of course, if "n" increases consecutively (can be also transformed into object) 
    target.children[0].children[1].style.color = styles[n] || styles[0]; 
} 
+0

downvoter,說你的論據 – RomanPerekhrest

+0

這在我看來根本不是最佳做法 –

+0

@IvanYarych,正如你所說的那樣,「這是你的意見」 。你知道最佳做法嗎?當我說「最佳實踐」時 - 我依靠N.Zacas,D.Crockford,D.Flanagan的作品......你依靠什麼? – RomanPerekhrest

2

這真的取決於慣例在你的工作場所。或者如果是你的私人項目,你喜歡什麼。
我個人不喜歡重複自己,特別是用一長串代碼,所以我會採用第一種方法。
第一種方法也爲您提供了只改變一行代碼的好處,如果將來某處您需要更改不同的變量。在第二種方法中,一個不好的開發者可能會改變一條線並離開另一條線(雖然提供了很好的測試,但這不應該像你期望的測試失敗那樣)。
我會說:如果您在多個位置訪問同一個深度嵌套變量,請將您的生活輕鬆一些,並通過將深度嵌套變量分配給具有良好描述性名稱的局部變量來防止愚蠢的錯誤。當天結束時elementColortarget.children[0].children[1].style.color好。

+0

丹尼爾你是對的。我會爲字符串做同樣的事情。例如,假設我們在2個條件中設置了className的字符串「Active」。你會緩存嗎? – Asperger

+2

這是一種不同的情況,被稱爲「魔術串」,應該始終避免。通過查看代碼,你必須問自己一個問題:「什麼是主動的」意味着什麼?我能根據價值來理解意義嗎?「。我總是將這樣的值賦給一個描述性變量,所以如果有人在我後面看到代碼,他們會立即知道發生了什麼。這也給你改變一次而不是在10個不同的地方改變它的好處... –

0

這裏的問題不是性能,而是可讀性。執行任務可以讓您或其他人更輕鬆地閱讀代碼並避免將來出錯,這通常是一種很好的做法。

我個人使用,即使該變量只能使用一次,這樣的快捷方式:

function fooBar(target) { 
    var element = target.children[0].children[1]; 

    element.style.color = "red"; 
} 

這也可能有助於給變量賦有意義的名字,如果你知道將存儲在那裏。例如:bodyElement,dropdownElement或快捷方式如bodyEl,dropdownEl等。

+0

我傾向於同意,任務左側的長路徑是一種痛苦:) –