JavaScript初學者應知的24條最佳實踐（譯）
原文：24 JavaScript Best Practices for Beginners
譯者：youngsterxyf
（注：閱讀原文的時候沒有注意發布日期，覺得不錯就翻譯了，翻譯到JSON.parse那一節覺得有點不對路才發現是2009年發布的文章，不過還是不錯的啦。另外，文章雖說24條最佳實踐，其實只有23條，不知道原作者怎么漏了一條。）
1.優先使用===，而不是==
JavaScript使用兩種相等性操作符：===|!==和==|!=。通常認為做比較的最佳實踐是使用前一組操作符。
“若兩個操作數的類型和值相同，那么===比較的結果為真，!==比較的結果為假。” — JavaScript語言精粹(JavaScript: The Good Parts)
然而，如果使用==和!=，當比較不同類型的操作數時，你就會碰到問題啦。在這種情況下，這組操作符會嘗試對操作數的值做無用的強制轉換。
2.Eval就是糟糕的代名詞
對于那些不熟悉JavaScript的人來說，函數”evel”讓我們能夠訪問JavaScript編譯器。我們可以通過給”eval”傳遞一個字符串參數來得到該字符串執行的結果。
這不僅會極大地降低你的腳本的性能，也會造成一個巨大的安全隱患，因為這賦予傳遞進來的純文本太多的能力。要盡可能地避免eval函數的使用。
3.不要懶手
技術上來說，你確實可能僥幸地省略多數花括號和分號。大多數瀏覽器都能夠正確地解釋如下代碼片段：
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'; 始終要想著以后
如果以后的某個時候，你需要在這種if語句中增加更多的命令，那該怎么辦呢？沒法子，你就只能重寫這塊代碼了。處理這個問題的底線是對于省略寫法保持謹慎。
4.使用JS Lint
JSLint是Douglas Crockford編寫的一個調試器。簡單地將你的腳本拷貝進去，它就會快速地掃描你的代碼中任何明顯的問題和錯誤。
“JSLint獲取一份JavaScript源碼，然后掃描代碼。如果發現問題，就會返回一條信息描述這個問題以及這個問題在源碼中的大致位置。問題雖然經常是語法錯誤，卻不一定是。JSLint也會查看一些風格習慣以及結構問題。它并不證明你的代碼是否正確，只是提供另外的一雙眼睛來幫助發現問題。”— JSLint文檔
在結束腳本代碼的編寫之前，對其執行一次JSLint，能夠保證你不會犯一些愚蠢的錯誤。
5.將腳本置于頁面的底部
這條技巧在本系列前面的文章中也推薦過。因為它在此處也非常合適（As it’s highly appropriate though），所有我將那段信息直接粘貼在這里。
記住—這條最佳實踐的主要目標是盡可能快速地為用戶加載頁面。當加載一個腳本時，瀏覽器直到整個腳本文件全部加載完畢才能繼續。因此，用戶必須等上更長的時間才能注意到任何的進度。
如果JS文件的目的僅僅是增加功能—例如，在點擊某個按鈕后—那么就將那些文件放在底部，body結束標簽之前吧。這絕對是一個最佳實踐。
更好的做法
<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”語句之時，僅僅讓解釋引擎做必須干的活吧。例如：
糟糕的做法
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>'; “我不會以測試基準來煩你；你只須相信我（或者自己去測試一下）—這是目前為止最快的方式！”
使用原生方法（比如join()），不用管抽象層面背后發生了什么，通常會比任何非原生方法快得多。 — James Padolsey, james.padolsey.com”
8.減少全局變量
“通過將全局的東西封裝進單個命名空間，能夠大大降低與其他應用、部件、代碼庫交互混亂的概率。”— 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 注意我們是怎樣將全局性的“足跡”減少為一個命名可笑的”DudeNameSpace”對象的。
9.注釋你的代碼
一開始看起來似乎沒有必要，但請相信我，你將會想盡可能好地注釋你的代碼。當你幾個月后再次回到項目，會發生什么呢？發現你根本沒法輕松地記起當初對每一行代碼的想法。或者，如果你的某個同事需要修改你的代碼，那又會怎么樣呢？始終，一直記著注釋你代碼的重要部分吧。
// Cycle through array and echo out each name for(var i = 0, len = array.length; i < len; i++) { console.log(array[i]); } 10.擁抱漸進增強
始終考慮到如何處理JavaScript禁用的情況。也許你會想“大多數我網頁的閱讀器都是啟用JavaScript的，因此我不擔心這個問題。”然而，這會是一個巨大的錯誤。
你曾花時間去看過關閉JavaScript后你的漂亮的滑動條是什么樣么？（下載Web開發者工具欄以方便干這事。）也許它會完全破壞你的站點。按照以往經驗，設計你的站點時應假設將會禁用JavaScript。那么，一旦你這樣做了，那么開始漸進地增強你的網頁布局吧！
11.不要傳遞字符串給”SetInterval”或”SetTimeOut”
考慮一下如下代碼：
setInterval( "document.getElementById('container').innerHTML += 'my new number: ' + i", 3000 ); 這段代碼不僅低效，而且其行為與”eval”函數相同。永遠不要傳給字符串給SetInterval和SetTimeOut。相反，應傳遞一個函數名。
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; 很不幸，經過一些測試，會發現這種簡寫在設置新成員時表現非常糟糕。作為替代，你應該使用var。
var o = being.person.man.bodyparts; o.arms = true; o.legs = true; 13.使用{}而不是New Object()
JavaScript中有多種創建對象的方式。也許更傳統的方式是使用”new”構造器，像這樣：
var o = new Object(); o.name = 'Jeffrey'; o.lastname = 'Way'; o.someFuncion = function() { console.log(this.name); } 然而，這種方式因其行為并不是我們所想的那樣而被認為是“糟糕的實踐。相反，我推薦你使用更健壯的對象字面方法。
更好的寫法
var o = { name: 'Jeffrey', lastName: 'Way', someFunction: function() { console.log(this.name); } }; 注意如果你只是想簡單地創建個空對象，{}就派上用場了。
var o = {}; “對象字面量使我們能夠編寫支持很多特性的代碼，并對代碼的實現者來說代碼仍然相對直觀。不需要直接調用構造器或維護傳遞給函數的參數的正確順序，等等。” — dyn-web.com
14.使用[]而不是New Array()
這同樣適用于創建一個新數組。
過得去的寫法
var a = new Array(); a[0] = 'Joe'; a[1] = 'Plumber'; 更好的寫法
var a = ['Joe', 'Plumber']; “JavaScript中一個常見的錯誤是需要數組時使用對象或需要對象時使用數組。規則很簡單：當屬性名是小的連續整數時，你應該使用數組。否則，使用對象”—Douglas Crockford
15.一長串變量？省略”var”關鍵字，使用逗號替代
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.始終，始終使用分號
技術上來說，大多數瀏覽器都允許你的省略一些分號。
var someItem = 'some string' function doSomething() { return 'something' } 話雖如此，但這是一種非常糟糕的做法，可能導致更大的問題，問題查找起來也更困難。
更好的寫法
var someItem = 'some string'; function doSomething() { return 'something'; } 18.”For in”語句
遍歷對象內的成員時，你也會得到方法函數。為了解決這個問題，應始終將你的代碼包裝在一個if語句中來過濾信息。
for(key in object) { if(object.hasOwnProperty(key)) { ... then do something... } } 引自JavaScript: 語言精粹， Douglas Crockford著
19.使用Firebug的”Timer”特性來優化代碼
需要一種快速簡單的方法來檢測一個操作花費多長時間么？使用Firebug的”timer”特性記錄結果。
function TimeTracker() { console.time("MyTimer"); for(x=5000; x > 0; x--){} console.timeEnd("MyTimer"); } 20.閱讀，閱讀，再閱讀
我是一個Web開發博客的超級粉絲（比如這個博客！），但吃午餐或者睡前，博客確實不是書籍的替代品。始終在你的床前桌上放一本wen開發書籍吧。如下是一些我最喜歡的JavaScript書籍。
多閱讀幾遍。我仍舊在讀！
21.自執行函數(Self-Executing Functions)
相比調用函數，當頁面加載或調用父函數時，讓函數自動執行會簡單些。簡單地將你的函數包裝在圓括號內，并添加額外的一對圓括號，其本質上就調用了這個函數。
(function doSomething() { return { name: 'jeff', lastName: 'way' }; })(); 22.原始(raw)JavaScript代碼的執行速度始終快于使用代碼庫
JavaScript代碼庫，如jQuery和Mootools，能夠為你節省大量的編碼時間—特別是使用AJAX操作。話雖如此，始終謹記代碼庫的執行速度始終是比不上原始JavaScript代碼的（假設了代碼的正確性）。
jQuery的”each”方法用來做遍歷非常贊，但使用原生”for”語句始終會快一些。
23.Crockford的JSON.Parse
雖然JavaScript 2應該有一個內置的JSON解析器，但寫本文之時，我們仍舊需要自己實現。Douglas Crockford，JSON的創造者，已經實現了一個解析器供你使用。可以從這里下載。
簡單地導入該腳本，你就能獲得一個新的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>'; } 24.刪除”Language”
幾年前，在script標簽內常見有”language”屬性。
<script type="text/javascript" language="javascript"> ... </script> 然而，這個屬性很早就被棄用了，所以就不要再使用了。
就這些了，同志們
現在你知道這JavaScript初學者應該知道的24條基本技巧。有機會也讓我知道一下你的小貼士吧。感謝閱讀。