10 個你需要了解的最佳 javascript 開發實踐

迷渡發表於2013-10-15

JavaScript

原文：Top 10 “Must Follow” JavaScript Best Practices

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'];

避免：

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 關鍵字問題導致效能問題？

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