原文：24 JavaScript Best Practices for Beginners

（注：閱讀原文的時(shí)候沒(méi)有注意發(fā)布日期，覺(jué)得不錯(cuò)就翻譯了，翻譯到JSON.parse那一節(jié)覺(jué)得有點(diǎn)不對(duì)路才發(fā)現(xiàn)是2009年發(fā)布的文章，不過(guò)還是不錯(cuò)的啦。另外，文章雖說(shuō)24條最佳實(shí)踐，其實(shí)只有23條，不知道原作者怎么漏了一條。）

1.優(yōu)先使用===，而不是==

JavaScript使用兩種相等性操作符：===|!==和==|!=。通常認(rèn)為做比較的最佳實(shí)踐是使用前一組操作符。

“若兩個(gè)操作數(shù)的類(lèi)型和值相同，那么===比較的結(jié)果為真，!==比較的結(jié)果為假。” — JavaScript語(yǔ)言精粹(JavaScript: The Good Parts)

然而，如果使用==和!=，當(dāng)比較不同類(lèi)型的操作數(shù)時(shí)，你就會(huì)碰到問(wèn)題啦。在這種情況下，這組操作符會(huì)嘗試對(duì)操作數(shù)的值做無(wú)用的強(qiáng)制轉(zhuǎn)換。

2.Eval就是糟糕的代名詞

對(duì)于那些不熟悉JavaScript的人來(lái)說(shuō)，函數(shù)”evel”讓我們能夠訪(fǎng)問(wèn)JavaScript編譯器。我們可以通過(guò)給”eval”傳遞一個(gè)字符串參數(shù)來(lái)得到該字符串執(zhí)行的結(jié)果。

這不僅會(huì)極大地降低你的腳本的性能，也會(huì)造成一個(gè)巨大的安全隱患，因?yàn)檫@賦予傳遞進(jìn)來(lái)的純文本太多的能力。要盡可能地避免eval函數(shù)的使用。

3.不要懶手

技術(shù)上來(lái)說(shuō)，你確實(shí)可能僥幸地省略多數(shù)花括號(hào)和分號(hào)。大多數(shù)瀏覽器都能夠正確地解釋如下代碼片段：

if(someVariableExists)
    x = false

if(someVariableExists)
    x = false
    anotherFunctionCall();

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

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

if(2 + 2 === 4) return 'nicely done';

始終要想著以后

如果以后的某個(gè)時(shí)候，你需要在這種if語(yǔ)句中增加更多的命令，那該怎么辦呢？沒(méi)法子，你就只能重寫(xiě)這塊代碼了。處理這個(gè)問(wèn)題的底線(xiàn)是對(duì)于省略寫(xiě)法保持謹(jǐn)慎。

4.使用JS Lint

JSLint是Douglas Crockford編寫(xiě)的一個(gè)調(diào)試器。簡(jiǎn)單地將你的腳本拷貝進(jìn)去，它就會(huì)快速地掃描你的代碼中任何明顯的問(wèn)題和錯(cuò)誤。

“JSLint獲取一份JavaScript源碼，然后掃描代碼。如果發(fā)現(xiàn)問(wèn)題，就會(huì)返回一條信息描述這個(gè)問(wèn)題以及這個(gè)問(wèn)題在源碼中的大致位置。問(wèn)題雖然經(jīng)常是語(yǔ)法錯(cuò)誤，卻不一定是。JSLint也會(huì)查看一些風(fēng)格習(xí)慣以及結(jié)構(gòu)問(wèn)題。它并不證明你的代碼是否正確，只是提供另外的一雙眼睛來(lái)幫助發(fā)現(xiàn)問(wèn)題。”—JSLint文檔

在結(jié)束腳本代碼的編寫(xiě)之前，對(duì)其執(zhí)行一次JSLint，能夠保證你不會(huì)犯一些愚蠢的錯(cuò)誤。

5.將腳本置于頁(yè)面的底部

這條技巧在本系列前面的文章中也推薦過(guò)。因?yàn)樗诖颂幰卜浅：线m（As it’s highly appropriate though），所有我將那段信息直接粘貼在這里。

記住—這條最佳實(shí)踐的主要目標(biāo)是盡可能快速地為用戶(hù)加載頁(yè)面。當(dāng)加載一個(gè)腳本時(shí)，瀏覽器直到整個(gè)腳本文件全部加載完畢才能繼續(xù)。因此，用戶(hù)必須等上更長(zhǎng)的時(shí)間才能注意到任何的進(jìn)度。

如果JS文件的目的僅僅是增加功能—例如，在點(diǎn)擊某個(gè)按鈕后—那么就將那些文件放在底部，body結(jié)束標(biāo)簽之前吧。這絕對(duì)是一個(gè)最佳實(shí)踐。

更好的做法

<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語(yǔ)句之外聲明變量

當(dāng)執(zhí)行一個(gè)冗長(zhǎng)的”for”語(yǔ)句之時(shí)，僅僅讓解釋引擎做必須干的活吧。例如：

糟糕的做法

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

更好的做法

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

7.構(gòu)建字符串的最快方式

當(dāng)需要遍歷一個(gè)數(shù)組或者對(duì)象之時(shí)，不要總是使用你能信手粘來(lái)的”for”語(yǔ)句。創(chuàng)造性地找個(gè)能夠完成工作的最快速的方案。

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

“我不會(huì)以測(cè)試基準(zhǔn)來(lái)煩你；你只須相信我（或者自己去測(cè)試一下）—這是目前為止最快的方式！”

使用原生方法（比如join()），不用管抽象層面背后發(fā)生了什么，通常會(huì)比任何非原生方法快得多。 — James Padolsey, james.padolsey.com”

8.減少全局變量

“通過(guò)將全局的東西封裝進(jìn)單個(gè)命名空間，能夠大大降低與其他應(yīng)用、部件、代碼庫(kù)交互混亂的概率。”— Douglas Crockford

var name = 'jeffrey';
var lastname = 'Way';

function doSomething() {...}

console.log(name);      // Jeffrey -- or window.name

var DudeNameSpace = {
    name: 'Jeffrey',
    lastname: 'Way',
    doSometing: function() {...}
}
console.log(DudeNameSpace.name);    // Jeffrey

9.注釋你的代碼

一開(kāi)始看起來(lái)似乎沒(méi)有必要，但請(qǐng)相信我，你將會(huì)想盡可能好地注釋你的代碼。當(dāng)你幾個(gè)月后再次回到項(xiàng)目，會(huì)發(fā)生什么呢？發(fā)現(xiàn)你根本沒(méi)法輕松地記起當(dāng)初對(duì)每一行代碼的想法。或者，如果你的某個(gè)同事需要修改你的代碼，那又會(huì)怎么樣呢？始終，一直記著注釋你代碼的重要部分吧。

// Cycle through array and echo out each name
for(var i = 0, len = array.length; i < len; i++) {
    console.log(array[i]);
}

10.擁抱漸進(jìn)增強(qiáng)

始終考慮到如何處理JavaScript禁用的情況。也許你會(huì)想“大多數(shù)我網(wǎng)頁(yè)的閱讀器都是啟用JavaScript的，因此我不擔(dān)心這個(gè)問(wèn)題。”然而，這會(huì)是一個(gè)巨大的錯(cuò)誤。

你曾花時(shí)間去看過(guò)關(guān)閉JavaScript后你的漂亮的滑動(dòng)條是什么樣么？（下載Web開(kāi)發(fā)者工具欄以方便干這事。）也許它會(huì)完全破壞你的站點(diǎn)。按照以往經(jīng)驗(yàn)，設(shè)計(jì)你的站點(diǎn)時(shí)應(yīng)假設(shè)將會(huì)禁用JavaScript。那么，一旦你這樣做了，那么開(kāi)始漸進(jìn)地增強(qiáng)你的網(wǎng)頁(yè)布局吧！

11.不要傳遞字符串給”SetInterval”或”SetTimeOut”

考慮一下如下代碼：

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

setInterval(someFunction, 3000);

12.不要使用”With”語(yǔ)句

乍一看，”With”語(yǔ)句似乎是個(gè)聰明的想法。基本概念是它們能夠?yàn)樵L(fǎng)問(wèn)深度嵌套對(duì)象提供一種簡(jiǎn)寫(xiě)方式。例如…

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

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

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

13.使用{}而不是New Object()

JavaScript中有多種創(chuàng)建對(duì)象的方式。也許更傳統(tǒng)的方式是使用”new”構(gòu)造器，像這樣：

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

更好的寫(xiě)法

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

注意如果你只是想簡(jiǎn)單地創(chuàng)建個(gè)空對(duì)象，{}就派上用場(chǎng)了。

var o = {};

“對(duì)象字面量使我們能夠編寫(xiě)支持很多特性的代碼，并對(duì)代碼的實(shí)現(xiàn)者來(lái)說(shuō)代碼仍然相對(duì)直觀。不需要直接調(diào)用構(gòu)造器或維護(hù)傳遞給函數(shù)的參數(shù)的正確順序，等等。” — dyn-web.com

14.使用[]而不是New Array()

這同樣適用于創(chuàng)建一個(gè)新數(shù)組。

過(guò)得去的寫(xiě)法

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

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

“JavaScript中一個(gè)常見(jiàn)的錯(cuò)誤是需要數(shù)組時(shí)使用對(duì)象或需要對(duì)象時(shí)使用數(shù)組。規(guī)則很簡(jiǎn)單：當(dāng)屬性名是小的連續(xù)整數(shù)時(shí)，你應(yīng)該使用數(shù)組。否則，使用對(duì)象”—Douglas Crockford

15.一長(zhǎng)串變量？省略”var”關(guān)鍵字，使用逗號(hào)替代

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

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

16.始終，始終使用分號(hào)

技術(shù)上來(lái)說(shuō)，大多數(shù)瀏覽器都允許你的省略一些分號(hào)。

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

更好的寫(xiě)法

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

18.”For in”語(yǔ)句

遍歷對(duì)象內(nèi)的成員時(shí)，你也會(huì)得到方法函數(shù)。為了解決這個(gè)問(wèn)題，應(yīng)始終將你的代碼包裝在一個(gè)if語(yǔ)句中來(lái)過(guò)濾信息。

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

引自JavaScript: 語(yǔ)言精粹， Douglas Crockford著

19.使用Firebug的”Timer”特性來(lái)優(yōu)化代碼

需要一種快速簡(jiǎn)單的方法來(lái)檢測(cè)一個(gè)操作花費(fèi)多長(zhǎng)時(shí)間么？使用Firebug的”timer”特性記錄結(jié)果。

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

20.閱讀，閱讀，再閱讀

我是一個(gè)Web開(kāi)發(fā)博客的超級(jí)粉絲（比如這個(gè)博客！），但吃午餐或者睡前，博客確實(shí)不是書(shū)籍的替代品。始終在你的床前桌上放一本wen開(kāi)發(fā)書(shū)籍吧。如下是一些我最喜歡的JavaScript書(shū)籍。

• 面向?qū)ο蟮腏avaScript
• JavaScript：語(yǔ)言精粹
• 學(xué)習(xí)jQuery 1.3
• 學(xué)習(xí)JavaScript

多閱讀幾遍。我仍舊在讀！

21.自執(zhí)行函數(shù)(Self-Executing Functions)

相比調(diào)用函數(shù)，當(dāng)頁(yè)面加載或調(diào)用父函數(shù)時(shí)，讓函數(shù)自動(dòng)執(zhí)行會(huì)簡(jiǎn)單些。簡(jiǎn)單地將你的函數(shù)包裝在圓括號(hào)內(nèi)，并添加額外的一對(duì)圓括號(hào)，其本質(zhì)上就調(diào)用了這個(gè)函數(shù)。

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

22.原始(raw)JavaScript代碼的執(zhí)行速度始終快于使用代碼庫(kù)

JavaScript代碼庫(kù)，如jQuery和Mootools，能夠?yàn)槟愎?jié)省大量的編碼時(shí)間—特別是使用AJAX操作。話(huà)雖如此，始終謹(jǐn)記代碼庫(kù)的執(zhí)行速度始終是比不上原始JavaScript代碼的（假設(shè)了代碼的正確性）。

jQuery的”each”方法用來(lái)做遍歷非常贊，但使用原生”for”語(yǔ)句始終會(huì)快一些。

23.Crockford的JSON.Parse

雖然JavaScript 2應(yīng)該有一個(gè)內(nèi)置的JSON解析器，但寫(xiě)本文之時(shí)，我們?nèi)耘f需要自己實(shí)現(xiàn)。Douglas Crockford，JSON的創(chuàng)造者，已經(jīng)實(shí)現(xiàn)了一個(gè)解析器供你使用。可以從這里下載。

簡(jiǎn)單地導(dǎo)入該腳本，你就能獲得一個(gè)新的JSON全局對(duì)象，用于解析你的.json文件。

var response = JSON.parse(xhr.responseText);

var container = document.getElementById('container');
for(var i = 0, len = response.length; i < len; i++) {
    container.innerHTML += '<li>' + response[i].name + ' : ' + response[i].email + '</li>';
}

24.刪除”Language”

幾年前，在script標(biāo)簽內(nèi)常見(jiàn)有”language”屬性。

<script type="text/javascript" language="javascript">
...
</script>

然而，這個(gè)屬性很早就被棄用了，所以就不要再使用了。

就這些了，同志們

現(xiàn)在你知道這JavaScript初學(xué)者應(yīng)該知道的24條基本技巧。有機(jī)會(huì)也讓我知道一下你的小貼士吧。感謝閱讀。