[[339224]]

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

“若兩個操作數(shù)的類型和值相同，那么===比較的結(jié)果為真，!==比較的結(jié)果為假。”

— JavaScript語言精粹(JavaScript: The Good Parts)

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

Eval就是糟糕的代名詞

對于那些不熟悉JavaScript的人來說，函數(shù)”evel”讓我們能夠訪問JavaScript編譯器。我們可以通過給”eval”傳遞一個字符串參數(shù)來得到該字符串執(zhí)行的結(jié)果。

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

不要懶手

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

if(someVariableExists) 
 
x = false 

然而，再考慮一下這段代碼：

if(someVariableExists) 
 
x = false 
 
anotherFunctionCall(); 

可能會有人認(rèn)為上一段代碼等價于：

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

很不幸，他錯了。事實上，它的本意是：

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

你應(yīng)該也注意到了，代碼中縮進(jìn)模仿了花括號的功能。

毋庸置疑，這是非常恐怖的做法，無論如何都應(yīng)該避免。唯一可以省略花括號的時候是在一行式的語句中，但即使這種情況，也是很有爭議的。

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

始終要想著以后。

如果以后的某個時候，你需要在這種if語句中增加更多的命令，那該怎么辦呢？

沒法子，你就只能重寫這塊代碼了。處理這個問題的底線是對于省略寫法保持謹(jǐn)慎。

使用JS Lint

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

“JSLint獲取一份JavaScript源碼，然后掃描代碼。如果發(fā)現(xiàn)問題，就會返回一條信息描述這個問題以及這個問題在源碼中的大致位置。問題雖然經(jīng)常是語法錯誤，卻不一定是。

JSLint也會查看一些風(fēng)格習(xí)慣以及結(jié)構(gòu)問題。它并不證明你的代碼是否正確，只是提供另外的一雙眼睛來幫助發(fā)現(xiàn)問題。”

—JSLint文檔

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

將腳本置于頁面的底部

這條技巧在本系列前面的文章中也推薦過。因為它在此處也非常合適（As it’s highly appropriate though），所有我將那段信息直接粘貼在這里。

記住—這條最佳實踐的主要目標(biāo)是盡可能快速地為用戶加載頁面。當(dāng)加載一個腳本時，瀏覽器直到整個腳本文件全部加載完畢才能繼續(xù)。

因此，用戶必須等上更長的時間才能注意到任何的進(jìn)度。

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

更好的做法

<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> 

在For語句之外聲明變量

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

糟糕的做法

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

注意上面代碼片段中的每次迭代都需要檢查數(shù)組的長度，并且每次都要遍歷DOM樹找到”container”元素—效率多低?。?/p>

更好的做法

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

感謝有位朋友留下評論展示如何進(jìn)一步優(yōu)化上面的代碼塊。

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

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

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

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

使用原生方法（比如join()），不用管抽象層面背后發(fā)生了什么，通常會比任何非原生方法快得多。

— James Padolsey, james.padolsey.com”

減少全局變量

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

var name = 'jeffrey'; 
 
var lastname = 'Way'; 
 
functiondoSomething() {...} 
 
console.log(name); // Jeffrey -- or window.name 

更好的做法

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

注意我們是怎樣將全局性的“足跡”減少為一個命名可笑的”DudeNameSpace”對象的。

注釋你的代碼

一開始看起來似乎沒有必要，但請相信我，你將會想盡可能好地注釋你的代碼。當(dāng)你幾個月后再次回到項目，會發(fā)生什么呢？發(fā)現(xiàn)你根本沒法輕松地記起當(dāng)初對每一行代碼的想法。

或者，如果你的某個同事需要修改你的代碼，那又會怎么樣呢？始終，一直記著注釋你代碼的重要部分吧。

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

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

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

然而，這會是一個巨大的錯誤。你曾花時間去看過關(guān)閉JavaScript后你的漂亮的滑動條是什么樣么？（下載Web開發(fā)者工具欄以方便干這事。）也許它會完全破壞你的站點。

按照以往經(jīng)驗，設(shè)計你的站點時應(yīng)假設(shè)將會禁用JavaScript。那么，一旦你這樣做了，那么開始漸進(jìn)地增強(qiáng)你的網(wǎng)頁布局吧！

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

考慮一下如下代碼：

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

這段代碼不僅低效，而且其行為與”eval”函數(shù)相同。永遠(yuǎn)不要傳給字符串給SetInterval和SetTimeOut。相反，應(yīng)傳遞一個函數(shù)名。

setInterval(someFunction, 3000); 

不要使用”With”語句

乍一看，”With”語句似乎是個聰明的想法?；靖拍钍撬鼈兡軌驗樵L問深度嵌套對象提供一種簡寫方式。例如…

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

取代如下寫法

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

很不幸，經(jīng)過一些測試，會發(fā)現(xiàn)這種簡寫在設(shè)置新成員時表現(xiàn)非常糟糕。作為替代，你應(yīng)該使用var。

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

使用{}而不是New Object()

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

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

然而，這種方式因其行為并不是我們所想的那樣而被認(rèn)為是“糟糕的實踐。相反，我推薦你使用更健壯的對象字面方法。

更好的寫法

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

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

var o={}; 

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

— dyn-web.com

使用[]而不是New Array()

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

過得去的寫法

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

更好的寫法

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

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

一長串變量？省略”var”關(guān)鍵字，使用逗號替代

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

更好的寫法

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

相當(dāng)?shù)牟谎宰悦鳌Ｎ也恢肋@里是否有任何真正的速度提升，但是它使你的代碼更加簡潔了。

始終，始終使用分號

技術(shù)上來說，大多數(shù)瀏覽器都允許你的省略一些分號。

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

話雖如此，但這是一種非常糟糕的做法，可能導(dǎo)致更大的問題，問題查找起來也更困難。

更好的寫法

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

”For in”語句

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

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

引自JavaScript: 語言精粹， Douglas Crockford著

使用Firebug的”Timer”特性來優(yōu)化代碼

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

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

閱讀，閱讀，再閱讀

我是一個Web開發(fā)博客的超級粉絲（比如這個博客！），但吃午餐或者睡前，博客確實不是書籍的替代品。

始終在你的床前桌上放一本wen開發(fā)書籍吧。如下是一些我最喜歡的JavaScript書籍。

面向?qū)ο蟮腏avaScript；

JavaScript：語言精粹；

學(xué)習(xí)jQuery 1.3；

學(xué)習(xí)JavaScript

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

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

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

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

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

JavaScript代碼庫，如jQuery和Mootools，能夠為你節(jié)省大量的編碼時間—特別是使用AJAX操作。

話雖如此，始終謹(jǐn)記代碼庫的執(zhí)行速度始終是比不上原始JavaScript代碼的（假設(shè)了代碼的正確性）。

jQuery的”each”方法用來做遍歷非常贊，但使用原生”for”語句始終會快一些。

Crockford的JSON.Parse

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

簡單地導(dǎo)入該腳本，你就能獲得一個新的JSON全局對象，用于解析你的.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>'; 
 
} 

刪除”Language”

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

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

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

就這些了，同志們。

現(xiàn)在你知道這JavaScript初學(xué)者應(yīng)該知道的23條基本技巧。感謝閱讀。