JavaScript的20條常規建議

 

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> &lt;!--mce:0--&gt;&lt;!--mce:1--&gt; 
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>’; 
引用: 
“沒那麼多繁文缛節來煩你；你就信我一次好了（或者你也可以自己試一試）—— 這真的是迄今能找到的最快辦法了！ 

用點土辦法，也別管它背後究竟發生了什麼抽象的東西，通常土辦法都比那些優雅的辦法要快捷得多！” 

8. 減少全局變量 
引用: 
“把你踩在全局的那些亂七八糟的腳印都歸於一人名下，能顯著降低與其他應用、小工具或JS庫沖突的可能性。”  

– Douglas Crockford 
復制內容到剪貼板代碼: 
var name = ’Jeffrey’; 
var lastName = ’Way’; 
function doSomething() {...} 
console.log(name); // Jeffrey --