10個你需要了解的JavaScript最佳實踐

Javascript 的很多擴充的特性是的它變得更加的犀利， 同時也給予程式員機會建立更漂亮并且更讓使用者喜歡的網站。

盡管很多的開發人員都樂于頌揚 javascript，但是仍舊有人看到它的陰暗面。

使用很多 javascript 代碼的 web 頁面會加載很慢，過多的使用 javascript 使得網頁醜陋和拖沓。很快如何有效地使用 javascript 成為一個非常火熱的話題。

這裡讓我們列出 10 個最佳 javascript 實踐，幫助你有效地使用 javascript。

1. 盡可能的保持代碼簡潔

可能大家都聽到過了N遍這個代碼簡潔問題了。作為一個開發人員你可能在你的代碼開發過程中使用了很多次，但千萬不要在 js 開發中忘記這點。

• 盡量在開發模式中添加注釋和空格，這樣保持代碼的可讀性
• 在釋出到産品環境前請将空格和注釋都删除，并且盡量縮寫變量和方法名
• 使用第三方工具幫助你實作壓縮 javascript。

2. 思考後再修改 prototypes

添加新的屬性到對象 prototype 中是導緻腳本出錯的常見原因。

yourObject.prototype.anotherFunction = ‘Hello’;
yourObject.prototype.anotherMethod = function () { … };
      

在上面代碼中，所有的變量都會被影響，因為他們都繼承于 

yourObject

。這樣的使用會導緻意想不到的行為。是以建議在使用完後删除類似的修改。

yourObject.prototype.anotherFunction = ‘Hello’;
yourObject.prototype.anotherMethod = function () { … };
test.anotherMethod();
delete yourObject.prototype.anotherFunction = ‘Hello’;
delete yourObject.prototype.anotherMethod = function () { … };
      

3. Debug Javascript 代碼

即使最好的開發人員都會犯錯。為了最大化的減少類似錯誤，請在你的 debugger 中運作你的代碼，确認你沒有遇到任何細微的錯誤

4. 避免 Eval

你的 JS 在沒有 

eval

 方法的時候也可以很好的工作。

eval

 允許通路 javascript 編譯器。如果一個字元串作為參數傳遞到 

eval

，那麼它的結果可以被執行。

這會很大的降低代碼的性能。盡量避免在産品環境中使用 

eval

。

5. 最小化 DOM 通路

DOM 是最複雜的 API，會使得代碼執行過程變慢。有時候 web 頁面可能沒有加載或者加載不完整。最好避免 DOM。

6. 在使用 javascript 類庫之前先學習 javascript

網際網路充斥着很多的 javascript 類庫，很多程式員都往往使用 js 類庫而不了解負面影響。強烈建議你在使用第三方類庫之前學習基本的 JS 代碼，否則，你就準備着倒黴吧。

7. 不要用 "SetTimeOut" 和 "Setinterval" 方法來作為 "Eval" 的備選

setTimeOut( "document.getID('value')", 3000);
      

在以上代碼中 

document.getID('value')

 在 

setTimeOut

 方法中被作為字元串來處理。 這類似于 

eval

 方法，在每個代碼執行中來執行一個字元串，是以會降低性能，是以，建議在這些方法中傳遞一個方法。

setTimeOut(yourFunction, 3000);
      

8. [] 比 new Array(); 更好

一個常犯的錯誤在于使用當需要數組的時候使用一個對象或者該使用對象的時候使用一個數組。但是使用原則很簡單：

“當屬性名稱是小的連續整數，你應該使用數組。否則，使用一個對象” - Douglas Crockford, JavaScript: Good Parts 的作者.

建議：

var a = ['1A','2B'];
      

避免：

[php] view plain copy print ?

1. <SPAN class=keyword style="FONT-WEIGHT: bold">var</SPAN> a = <SPAN class=keyword style="FONT-WEIGHT: bold">new</SPAN> <SPAN class=keyword style="FONT-WEIGHT: bold">Array</SPAN>();  
2. a[<SPAN class=number style="COLOR: rgb(0,153,153)">0</SPAN>] = <SPAN class=string style="COLOR: rgb(221,17,68)">"1A"</SPAN>;  
3. a[<SPAN class=number style="COLOR: rgb(0,153,153)">1</SPAN>] = <SPAN class=string style="COLOR: rgb(221,17,68)">"2B"</SPAN>;  

var a = new Array();
a[0] = "1A";
a[1] = "2B";
           

9. 盡量不要多次使用 var

在初始每一個變量的時候，程式員都習慣使用 

var

 關鍵字。相反，建議你使用逗号來避免多餘的關鍵字，并且減少代碼體積。 如下：

var variableOne = ‘string 1’, 
variableTwo = ‘string 2’, 
variableThree = ‘string 3’;
      

10. 不要忽略分号 ";"

這往往是大家花費數個小時進行 debug 的原因之一。

我很确信你肯定也在其它的文章中閱讀過以上相關的内容，但是大家可能往往都忽略了很多基本的規則。 你是不是也曾經忽略過分号。是不是也遇到過 

eval

 關鍵字問題導緻性能問題？

希望大家能夠喜歡，謝謝！

相關閱讀

1. JavaScript中,{}+{}等于多少?
2. JavaScript：将所有值都轉換成對象
3. 為什麼 ++[[]][+[]]+[+[]] = 10？

相關書籍

• JavaScript語言精粹(修訂版)
• JavaScript DOM程式設計藝術(第2版)
• 編寫可維護的JavaScript