摘要：本文總結(jié)了則的最佳實(shí)踐，希望對(duì)各位爪哇國(guó)編劇有用。使用有兩種等值運(yùn)算符，分別是和，以及和。比較兩個(gè)值的時(shí)候，請(qǐng)使用前者，避免討厭的強(qiáng)制類型轉(zhuǎn)換帶來(lái)預(yù)料之外的結(jié)果。下只提供無(wú)強(qiáng)制類型轉(zhuǎn)換的別名和別名，不用頭疼選哪種。

本文總結(jié)了20則JavaScript的最佳實(shí)踐，希望對(duì)各位爪哇國(guó)編劇有用。（順帶推銷下CoffeeScript）

。

JavaScript有兩種等值運(yùn)算符，分別是===和==，以及！==和！=。比較兩個(gè)值的時(shí)候，請(qǐng)使用前者，避免JavaScript討厭的強(qiáng)制類型轉(zhuǎn)換帶來(lái)預(yù)料之外的結(jié)果。

CoffeeScript下只提供無(wú)強(qiáng)制類型轉(zhuǎn)換的==（別名is）和!=（別名isnt），不用頭疼選哪種。

eval讓我們將字符串作為參數(shù)執(zhí)行，這是非常強(qiáng)大的特性。然而，eval會(huì)大幅降低腳本的性能，也會(huì)引起安全問(wèn)題。除非你打算用JavaScript寫一個(gè)編譯器，還是對(duì)eval敬而遠(yuǎn)之的好。

省掉一些花括號(hào)，大多數(shù)瀏覽器仍然能理解，例如：

if(someVariableExists)  
   x = false

然而，復(fù)雜一點(diǎn)的代碼就可能帶來(lái)問(wèn)題：

if(someVariableExists)  
   x = false  
   anotherFunctionCall();

你想表達(dá)的也許是：

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

然而實(shí)際上等價(jià)于：

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

所以，還是乖乖地寫花括號(hào)吧，這能為你省去無(wú)數(shù)麻煩。

如果你真那么討厭花括號(hào)，還是投入CoffeeScript的懷抱吧：

if someVariable?
  x = false

if someVariable?
  x = false
  anotherFunctionCall()

同理，大多數(shù)瀏覽器允許你省略分號(hào)：

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

這和省略花括號(hào)一樣糟糕，還是老實(shí)一點(diǎn)好：

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

或者，投奔CoffeeScript吧，不用分號(hào)了：

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

函數(shù)的寫法是不是也很帥？直接定義一個(gè)匿名函數(shù)，然后把它賦給一個(gè)變量即可。

JSLint是一款非常棒的調(diào)試器，它會(huì)迅速找出代碼中的問(wèn)題，包括語(yǔ)法錯(cuò)誤、編碼風(fēng)格和程序結(jié)構(gòu)問(wèn)題。

腳本加載是阻塞的，腳本加載并執(zhí)行完之后，瀏覽器不能繼續(xù)渲染下面的內(nèi)容。因此，用戶被迫等待更長(zhǎng)時(shí)間。如果你的JavaScript腳本只是用來(lái)增強(qiáng)效果，那么請(qǐng)將它放在頁(yè)面的最后：

And now you know my favorite kinds of corn. 
  
  
  
  

糟糕的例子：

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

每次循環(huán)都要計(jì)算數(shù)組的長(zhǎng)度，每次都要遍歷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);  
}

遍歷數(shù)組或?qū)ο蟮臅r(shí)候不一定要用for，使用原生函數(shù)往往是更好的選擇：

var arr = ["item 1", "item 2", "item 3", ...];  
var list = "
" + arr.join("
") + "
";

避免模塊和類庫(kù)互相干擾。

var name = "Jeffrey";  
var lastName = "Way";  

function doSomething() {...}  

console.log(name);

更好：

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

CoffeeScipt下變量默認(rèn)非全局，不需要加var，而且編譯的時(shí)候，整個(gè).coffee文件處于一個(gè)函數(shù)之中，也就是說(shuō)，一個(gè)獨(dú)立的命名空間。使用CoffeeScript，不用再操心全局變量問(wèn)題。

良好的注釋，幫助別人或者幾個(gè)月之后的你理解你的代碼。

“大多數(shù)訪問(wèn)者啟用了JavaScript，不必?fù)?dān)心”這是很大的誤區(qū)。

花費(fèi)一點(diǎn)時(shí)間查看下你漂亮的頁(yè)面在javascript被關(guān)閉時(shí)是什么樣的吧。設(shè)計(jì)網(wǎng)站時(shí)，首先假定 JavaScript 是被禁用的，在此基礎(chǔ)上，漸進(jìn)增強(qiáng)網(wǎng)站。

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

上面的代碼和eval如出一轍，效率低下。我們應(yīng)該傳遞函數(shù)：

setInterval(someFunction, 3000);

看起來(lái)，使用with語(yǔ)句的代碼很清晰，例如：

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

這比下面的要清爽得多：

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

很不幸，使用with語(yǔ)句導(dǎo)致添加新成員時(shí)性能低下，我們還是用變量吧：

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

new加構(gòu)造函數(shù)可以創(chuàng)建對(duì)象：

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);  
   }  
};

這樣我們就不需要直接調(diào)用構(gòu)造函數(shù)，也不需要為傳遞給函數(shù)的參數(shù)的正確順序而提心吊膽。

創(chuàng)建數(shù)組也是一樣的道理。

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

不如

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

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？正如我們前面提到的，變量默認(rèn)非全局，所以我們根本不需要var。

遍歷對(duì)象的屬性的時(shí)候，還會(huì)遍歷方法函數(shù)，真浪費(fèi)。加上一個(gè)if語(yǔ)句過(guò)濾下：

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

Firebug timer 可以簡(jiǎn)單地確定操作消耗的時(shí)間：

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

午餐之余或上床睡覺(jué)之前，讀點(diǎn)書吧。床頭常發(fā)一本web開發(fā)方面的書。我喜歡讀的一些書包括：

Object-Oriented JavaScript

JavaScript: The Good Parts

Learning jQuery 1.3

Learning JavaScript

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

用括號(hào)包裹函數(shù)定義，然后應(yīng)用函數(shù)：

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

CoffeeScript版本更簡(jiǎn)潔：

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

用do的話更清楚：

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

jQuery和Mootools可以節(jié)約你大量的開發(fā)時(shí)間——特別是處理AJAX。但是別忘了，使用庫(kù)永遠(yuǎn)不會(huì)比原生代碼快（假定你編碼正確）。

本文為24 JavaScript Best Practices for Beginners的衍生作品，在其基礎(chǔ)上進(jìn)行了歸并調(diào)整，并加入了 CoffeeScript 的內(nèi)容。