實踐中悟出的最佳JavaScript開發

尛沫發表於2014-06-16
JavaScript

JavaScript的很多擴充套件的特性使得它變得更加的犀利，同時也給予程式設計師機會建立更漂亮並且更讓使用者喜歡的網站。儘管很多的開發人員都熱衷於稱讚JavaScript，但仍然不乏有很多人看到它的陰暗面。

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

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

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

  • 儘量在開發模式中新增註釋和空格，這樣保持程式碼的可讀性
  • 在釋出到產品環境前請將空格和註釋都刪除，並且儘量縮寫變數和方法名
  • 使用第三方工具幫助你實現壓縮JavaScript。

思考後再修改 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 () { … };

在使用JavaScript類庫之前先學習JavaScript
網際網路充斥著很多的JavaScript 類庫，很多程式設計師都往往使用JS類庫而不理解負面影響。強烈建議你在使用第三方類庫之前學習基本的JS程式碼。

Debug JavaScript程式碼
即使最好的開發人員都會犯錯。為了最大化地減少類似錯誤，請在你的 debugger 中執行你的程式碼，確認你沒有遇到任何細微的錯誤。

最小化DOM訪問
DOM是最複雜的 API，會使得程式碼執行過程變慢。有時候Web頁面可能沒有載入或者載入不完整。最好避免 DOM。

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

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

在以上程式碼中 document.getID('value') 在 setTimeOut 方法中被作為字串來處理。 這類似於 eval 方法，在每個程式碼執行中來執行一個字串，因此會降低效能，因此，建議在這些方法中傳遞一個方法。

setTimeOut(yourFunction, 3000);

[] 比 new Array(); 更好
一個常犯的錯誤在於使用當需要陣列的時候使用一個物件或者該使用物件的時候使用一個陣列。但是使用原則很簡單：

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

建議：

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

避免：

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

避免 Eval
你的 JS 在沒有 eval 方法的時候也可以很好地工作。eval 允許訪問JavaScript 編譯器。如果一個字串作為引數傳遞到 eval，那麼它的結果可以被執行，會很大地降低程式碼的效能。儘量避免在產品環境中使用 eval。

儘量不要多次使用 var
在初始每一個變數的時候，程式設計師都習慣使用 var 關鍵字。相反，建議你使用逗號來避免多餘的關鍵字，並且減少程式碼體積。 如下：

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

不要忽略分號 ";"
這往往是大家花費數個小時進行 debug 的原因之一。

本文為Anyforweb技術分享部落格，需要了解網站建設及更多Web應用相關資訊，請訪問anyforweb.com。

相關文章