JavaScript最佳實踐20則

本文總結了20則JavaScript的最佳實踐，但願對各位爪哇國編劇有用。（順帶推銷下CoffeeScript）

。

1. 使用 ===

JavaScript有兩種等值運算符，分別是===和==，以及！==和！=。比較兩個值的時候，請使用前者，避免JavaScript討厭的強制類型轉換帶來預料以外的結果。

CoffeeScript下只提供無強制類型轉換的==（別名is）和!=（別名isnt），不用頭疼選哪一種。

2. eval很邪惡

eval讓咱們將字符串做爲參數執行，這是很是強大的特性。然而，eval會大幅下降腳本的性能，也會引發安全問題。除非你打算用JavaScript寫一個編譯器，仍是對eval敬而遠之的好。

3. 少打字多費腦

省掉一些花括號，大多數瀏覽器仍然能理解，例如：

if(someVariableExists)  
   x = false

然而，複雜一點的代碼就可能帶來問題：

if(someVariableExists)  
   x = false  
   anotherFunctionCall();

你想表達的也許是：

if(someVariableExists) {  
   x = false;  
   anotherFunctionCall();  
}

然而實際上等價於：

if(someVariableExists) {  
   x = false;  
}  
anotherFunctionCall();

因此，仍是乖乖地寫花括號吧，這能爲你省去無數麻煩。

若是你真那麼討厭花括號，仍是投入CoffeeScript的懷抱吧：

if someVariable?
  x = false

if someVariable?
  x = false
  anotherFunctionCall()

同理，大多數瀏覽器容許你省略分號：

var someItem = 'some string'  
function doSomething() {  
  return 'something'  
}

這和省略花括號同樣糟糕，仍是老實一點好：

var someItem = 'some string';  
function doSomething() {  
  return 'something';  
}

或者，投奔CoffeeScript吧，不用分號了：

someItem = 'some string'
doSomething = -> 'something'

函數的寫法是否是也很帥？直接定義一個匿名函數，而後把它賦給一個變量便可。

4. 使用JSLint

JSLint是一款很是棒的調試器，它會迅速找出代碼中的問題，包括語法錯誤、編碼風格和程序結構問題。

5. 將腳本放在頁面的底部

腳本加載是阻塞的，腳本加載並執行完以後，瀏覽器不能繼續渲染下面的內容。所以，用戶被迫等待更長時間。若是你的JavaScript腳本只是用來加強效果，那麼請將它放在頁面的最後：

<p>And now you know my favorite kinds of corn. </p>  
<script type="text/javascript" src="path/to/file.js"></script>  
<script type="text/javascript" src="path/to/anotherFile.js"></script>  
</body>  
</html>

6. 避免在for語句中聲明變量

糟糕的例子：

for(var i = 0; i < someArray.length; i++) {  
   var container = document.getElementById('container');  
   container.innerHtml += 'my number: ' + i;  
   console.log(i);  
}

每次循環都要計算數組的長度，每次都要遍歷DOM查詢「container」元素，效率低下！

改爲這樣就好一些：

var container = document.getElementById('container');  
for(var i = 0, len = someArray.length; i < len;  i++) {  
   container.innerHtml += 'my number: ' + i;  
   console.log(i);  
}

7. 構建字符串的最優方法

遍歷數組或對象的時候不必定要用for，使用原生函數每每是更好的選擇：

var arr = ['item 1', 'item 2', 'item 3', ...];  
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

8. 減小全局變量

避免模塊和類庫互相干擾。

var name = 'Jeffrey';  
var lastName = 'Way';  

function doSomething() {...}  

console.log(name);

更好：

var DudeNameSpace = {  
   name : 'Jeffrey',  
   lastName : 'Way',  
   doSomething : function() {...}  
}  
console.log(DudeNameSpace.name)

CoffeeScipt下變量默認非全局，不須要加var，並且編譯的時候，整個.coffee文件處於一個函數之中，也就是說，一個獨立的命名空間。使用CoffeeScript，不用再操心全局變量問題。

9. 註釋

良好的註釋，幫助別人或者幾個月以後的你理解你的代碼。

10. 漸進加強

「大多數訪問者啓用了JavaScript，沒必要擔憂」這是很大的誤區。

花費一點時間查看下你漂亮的頁面在javascript被關閉時是什麼樣的吧。設計網站時，首先假定 JavaScript 是被禁用的，在此基礎上，漸進加強網站。

11. 不要給setInterval或setTimeout傳遞字符串參數

setInterval(  
"document.getElementById('container').innerHTML += 'My new number: ' + i", 3000  
);

上面的代碼和eval一模一樣，效率低下。咱們應該傳遞函數：

setInterval(someFunction, 3000);

12. 別用with

看起來，使用with語句的代碼很清晰，例如：

with (being.person.man.bodyparts) {  
   arms = true;  
   legs = true;  
}

這比下面的要清爽得多：

being.person.man.bodyparts.arms = true;  
being.person.man.bodyparts.legs= true;

很不幸，使用with語句致使添加新成員時性能低下，咱們仍是用變量吧：

var o = being.person.man.bodyparts;  
o.arms = true;  
o.legs = true;

13. 使用{}代替new Object()

new加構造函數能夠建立對象：

var o = new Object();  
o.name = 'Jeffrey';  
o.lastName = 'Way';  
o.someFunction = function() {  
   console.log(this.name);  
}

這種方法多受詬病，更好的作法是：

var o = {  
   name: 'Jeffrey',  
   lastName = 'Way',  
   someFunction : function() {  
      console.log(this.name);  
   }  
};

這樣咱們就不須要直接調用構造函數，也不須要爲傳遞給函數的參數的正確順序而提心吊膽。

14. 使用[]代替new Array()

建立數組也是同樣的道理。

var a = new Array();  
a[0] = "Joe";  
a[1] = 'Plumber';

不如

var a = ['Joe','Plumber'];

15. 定義多個變量時，使用逗號

var someItem = 'some string';  
var anotherItem = 'another string';  
var oneMoreItem = 'one more string';

不如這樣：

var someItem = 'some string',  
    anotherItem = 'another string',  
    oneMoreItem = 'one more string';

這樣代碼更清晰。

CoffeeScript？正如咱們前面提到的，變量默認非全局，因此咱們根本不須要var。

16. for in

遍歷對象的屬性的時候，還會遍歷方法函數，真浪費。加上一個if語句過濾下：

for(key in object) {  
   if(object.hasOwnProperty(key) {  
      ...then do something...  
   }  
}

17. 使用Firebug timer 做性能分析

Firebug timer 能夠簡單地肯定操做消耗的時間：

function TimeTracker(){  
 console.time("MyTimer");  
 for(x=5000; x > 0; x--){}  
 console.timeEnd("MyTimer");  
}

18. 閱讀，閱讀，仍是閱讀

午飯之餘或上牀睡覺以前，讀點書吧。牀頭常發一本web開發方面的書。我喜歡讀的一些書包括：

• Object-Oriented JavaScript
• JavaScript: The Good Parts
• Learning jQuery 1.3
• Learning JavaScript

讀下吧。多讀幾遍。我常讀。

19. 自執行函數

用括號包裹函數定義，而後應用函數：

(function doSomething() {  
   return {  
      name: 'jeff',  
      lastName: 'way'  
   };  
})();

CoffeeScript版本更簡潔：

(-> { name: 'jeff', lastName: 'way' })()

用do的話更清楚：

do -> { name: 'jeff', lastName: 'way' }

20. 原生代碼總能比使用庫更快

jQuery和Mootools能夠節約你大量的開發時間——特別是處理AJAX。可是別忘了，使用庫永遠不會比原生代碼快（假定你編碼正確）。

---

本文爲24 JavaScript Best Practices for Beginners的衍生做品，在其基礎上進行了歸併調整，並加入了 CoffeeScript 的內容。