JavaScript 剛開始學習的人應知的 24 條最佳實務

標籤：name   names   res   是什麼   命名   parse   ast   指令碼   轉換   

原文：24 JavaScript Best Practices for Beginners

（註：閱讀原文的時候沒有注意公布日期，認為不錯就翻譯了，翻譯到 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檔案的目的不過添加功能---比如，在點擊某個button後---那麼就將那些檔案放在底部，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 namefor(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);    }};

注意假設你僅僅是想簡單地建立個Null 物件，{}就派上用場了。

var o = {};

>

"對象字面量使我們可以編寫支援非常多特性的代碼。並對代碼的實現者來說代碼仍然相對直觀。不須要直接調用構造器或維護傳遞給函數的參數的正確順序，等等。" --- dyn-web.com

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

這相同適用於建立一個新數組。

過得去的寫法

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

更好的寫法

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

>

"JavaScript中一個常見的錯誤是須要數組時使用對象或須要對象時使用數組。

規則非常easy：當屬性名稱是小的連續整數時，你應該使用數組。否則，使用對象"---Douglas Crockford

15.一長串變數？省略"var"keyword，使用逗號替代

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：語言精粹
• 瘋狂Ajax講義
• 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條基本技巧。有機會也讓我知道一下你的小貼士吧。

感謝閱讀。

JavaScript 剛開始學習的人應知的 24 條最佳實務