給JavaScript新手的24條實用建議

本文列出了24條能讓你的代碼編寫過程更爲輕鬆高效的建議。也許您仍是JavaScript初學者，剛剛寫完本身的Hello World，那這裏有不少對您的工做將十分有用的小貼士；也許有些技巧您已經知道，那就試試快速瀏覽一下，看能不能發現一點新東西吧！

1. 用 === 代替 ==JavaScript裏有兩種不一樣的相等運算符：===|!== 和==|!=。相比之下，前者更值得推薦。請儘可能使用前者。
「若是兩個比較對象有着一樣的類型和值，===返回true，!==返回false。」
– JavaScript: The Good Parts
不過，若是使用==和!=，在操做不一樣數據類型時, 你可能會遇到一些意想不到的問題。在進行相等判斷前，JavaScript會試圖將它們轉換爲字符串、數字或 Boolean量。
2. 避免使用Eval函數
Eval函數把一個字串做爲參數，並把字串做爲JavaScript語句執行，返回結果（參考）。
此函數不只會下降你腳本的執行效率，並且還大大增長了安全風險，由於它賦予了做爲文本的參數太大的權利。千萬別用！
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 掃描接收的代碼。發現問題，描述問題，並給出其在源碼中的大概位置。可發現的問題包括但不限於語法錯誤，雖然語法錯誤確實是最多見的。JSLint也會用約定俗成的習慣檢查代碼的格式化風格，以及結構錯誤。經過JSLint的掃描並不能保證你的程序就徹底正確。它只是爲您提供了額外一雙發現錯誤的眼睛。」 
– JSLint 文檔
完成代碼以前，把它放到JSLint裏檢查一下，快速消滅你的無意之過。
5. 在頁面底部加載腳本
正以下圖所示：


請記住—— 咱們要想方設法保證客戶端的頁面載入速度儘量的快。而腳本沒載入完成，瀏覽器就無法加載頁面的剩餘部分。
若是你的JS文件只是添加一些額外功能——例如，爲點擊某連接綁定事件——那大能夠等頁面加載基本完成後再作。把JS文件放到頁面最後，body的結束標籤以前，這樣作最好了。
更好的寫法是：
<p>超哥是世界上最帥的人。benhuoer.com是世界上最好看的博客。</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語句時，不要讓JavaScript引擎每次都重複那些沒有必要的操做。例如：
這樣很差：
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>'; 
「沒那麼多繁文縟節來煩你；你就信我一次好了（或者你也能夠本身試一試）—— 這真的是迄今能找到的最快辦法了！
用點土辦法，也別管它背後究竟發生了什麼抽象的東西，一般土辦法都比那些優雅的辦法要快捷得多！」– James Padolsey, james.padolsey.com
8. 減小全局變量
「把你踩在全局的那些亂七八糟的腳印都歸於一人名下，能顯著下降與其餘應用、小工具或JS庫衝突的可能性。」 – Douglas Crockford
var name = 'Jeffrey';   
var lastName = 'Way';   
  
function doSomething() {...}   
  
console.log(name); // Jeffrey -- or window.name  
更好的寫法：
var DudeNameSpace = {   
   name : 'Jeffrey',   
   lastName : 'Way',   
   doSomething : 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);   
} 
10. 試試漸進加強
必定要記得爲未啓用JavaScript的狀況提供替代方案。你們可能會認爲，「大部分個人訪客都啓用了JavaScript的，我纔不用擔憂」。這樣的話，你可就大錯特錯了！
你有沒有試過看看禁用JavaScript後你那漂亮的滑動器都成啥樣了？（你能夠下載 Web Developer ToolBar 輕鬆完成這項任務。）禁用以後你的網站可能就完全失去了可用性！經驗之談：開發初期老是按照沒有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;  
不幸的是，測試代表，若你要爲對象插入新成員，with的表現很是糟糕，它的執行速度很是緩慢。替代方案是聲明一個變量：
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.someFunction = function() {   
   console.log(this.name);   
} 
不過，這一方法讀起來卻比較糟糕。我強烈建議你採用下面這種在文字樣式上更爲強健的寫法：
更好的寫法：
var o = {   
   name: 'Jeffrey',   
   lastName = 'Way',   
   someFunction : function() {   
      console.log(this.name);   
   }   
}; 
注意，若是你想新建一個空對象，用 {} 就能行：
var o = {}; 
「對象字面符(Objects literals)幫助咱們寫出支持不少特性，同時又關聯性強、簡明直接的代碼。不必直接調用新建語句，而後再費心維護聲明變量和傳遞變量的語句之間的正確順序，等等。」 – 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';
…不言自明。我不知道這樣作可否提高代碼執行速度，可是確實讓你的代碼乾淨許多。
17. 千萬千萬記得寫分號
大部分瀏覽器都容許你不寫句尾分號：
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...   
   }   
}
引自 Douglas Crockford 所做： JavaScript: The Good Parts 
19. 使用Firebug的「Timer」功能優化你的代碼
想要輕鬆地快速瞭解某項操做的用時嗎？使用Firebug的timer功能來記錄結果好了。
function TimeTracker(){   
console.time("MyTimer");   
for(x=5000; x > 0; x--){}   
console.timeEnd("MyTimer");   
}
20. 讀，讀，讀……Read, Read, Read…
雖然我是Web開發博客（就像這個！）的超級粉絲，但吃飯和睡覺前除了看書好像也別無選擇~ 在你的牀頭櫃上擺一本Web開發的好書吧！下列書單都是個人最愛：
Object-Oriented JavaScript（暫無中文版） 
JavaScript: The Good Parts（中文版） 
Learning jQuery 1.3（暫無中文版，但你能夠看看老版本的中文版） 
Learning JavaScript（中文版） 
閱讀他們…… 反覆閱讀不少次！我如今都還在讀。
21. 自決的函數
相比於調用函數，讓函數在頁面載入或者某一父函數被調用時自動執行，是十分簡單方便的作法。你只須要把你的函數包在父輩以內，而後添上一個額外的括號，本質上這括號就觸發了你定義的函數（瞭解更多）。
(function doSomething() {   
   return {   
      name: 'jeff',   
      lastName: 'way'  
   };   
})(); 
22. 原生 JavaScript 老是會比使用代碼庫來的快
諸如jQuery和Mootools這樣的JavaScript庫，能爲你寫代碼的過程省下很多時間——尤爲是當須要 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.name + ' : ' + response.email + '</li>'; 
}
關於JSON，請查看更多介紹。
24. 移去「Language」
不少年前，language仍是每段script標籤必備屬性：
<script type="text/javascript" language="javascript">   
...   
</script>
不過如今，這屬性已經沒啥用好久了…… 因此，刪掉算啦！
就這些了，朋友們~
就是這些了，這就是我給JavaScript初學者的24條小建議。各位親愛的朋友，大家的見解呢？大家有什麼快速小貼士嗎？感謝你的耐心閱讀。