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書籍。

• 面向對象的JavaScript
• JavaScript：語言精粹
• 學習jQuery 1.3
• 學習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條基本技巧。有機會也讓我知道一下你的小貼士吧。感謝閱讀。