JavaScript的20條常規建議

　　 用 === 代替 == 

JavaScript裡有兩種不同的相等運算符===|!== 和==|!=相比之下前者更值得推薦請盡量使用前者 
引用: 
“如果兩個比較對象有著同樣的類型和值===返回true!==返回false” 

– JavaScript: The Good Parts 
不過如果使用==和!=在操作不同數據類型時 你可能會遇到一些意想不到的問題在進行相等判斷前JavaScript會試圖將它們轉換為字符串數字或 Boolean量 

 避免使用Eval函數 

Eval函數把一個字串作為參數並把字串作為JavaScript語句執行返回結果（參考） 

此函數不僅會降低你腳本的執行效率而且還大大增加了安全風險因為它賦予了作為文本的參數太大的權利千萬別用！ 

 不要使用快速寫法 

技術上說你可以省略掉大部分花括弧和句尾分號絕大多數浏覽器都能正確執行以下語句 
復制內容到剪貼板代碼: 
if(someVariableExists) 
   x = false 
不過如果是這樣的呢 
復制內容到剪貼板代碼: 
if(someVariableExists) 
   x = false 
   anotherFunctionCall(); 
你可能會認為它和下面的語句相等 
復制內容到剪貼板代碼: 
if(someVariableExists) { 
   x = false; 
   anotherFunctionCall(); 
} 
不幸的是事實並非如此現實情況是它等價於 
復制內容到剪貼板代碼: 
if(someVariableExists) { 
   x = false; 
} 
anotherFunctionCall(); 
如您注意到的再漂亮的縮進也不能代替這華麗的花括弧在所有情況下都請寫清楚花括號和句尾分號在只有一行語句的時候能偶爾省略掉雖然下這麼做也是極度不被推薦的 
復制內容到剪貼板代碼: 
if( +  === ) return ’nicely done’; 
多考慮下將來吧孩子 

假設在將來的開發過程中你需要為這個 if 語句添加更多的命令呢？到時候你還不是得把括號給加上？ 

 好好利用JS Lint 

JSLint 是由 Douglas Crockford 編寫的一個調試器你只需要貼上你的代碼它就能快速為您掃描出任何明顯的錯誤和問題 
引用: 
“JSLint掃描接收的代碼發現問題描述問題並給出其在源碼中的大概位置可發現的問題包括但不限於語法錯誤雖然語法錯誤確實是最常見的JSLint也會用 
約定俗成的習慣檢查代碼的格式化風格以及結構錯誤通過JSLint的掃描並不能保證你的程序就完全正確它只是為您提供了額外一雙發現錯誤的眼睛” 

– JSLint 文檔 
完成代碼之前把它放到JSLint裡檢查一下快速消滅你的無心之過 

 在頁面底部加載腳本 

正如下圖所示 

請記住—— 我們要千方百計保證客戶端的頁面載入速度盡可能的快而腳本沒載入完成浏覽器就沒法加載頁面的剩余部分 

如果你的JS文件只是添加一些額外功能——例如為點擊某鏈接綁定事件——那大可以等頁面加載基本完成後再做把JS文件放到頁面最後body的結束標簽之前這樣做最好了 

更好的寫法是 
復制內容到剪貼板代碼: 
<p>超哥是世界上最帥的人benhuoercom是世界上最好看的博客</p> 
<script type="text/javascript" src="path/to/filejs"></script> 
<script type="text/javascript" src="path/to/anotherFilejs"></script> 
</body> 
</html> &lt;!mce:&gt;&lt;!mce:&gt; 
 在 For 語句外部聲明變量 

當需要執行冗長的for語句時不要讓JavaScript引擎每次都重復那些沒有必要的操作例如 

這樣不好 
復制內容到剪貼板代碼: 
for(var i = ; i < someArraylength; i++) { 
   var container = documentgetElementById(’container’); 
   containerinnerHtml += ’my number: ’ + i; 
   consolelog(i); 
} 
這段代碼每次都重新定義數組長度每次都在遍歷DOM尋找container元素 —— 太傻了！ 

這樣好多了 
復制內容到剪貼板代碼: 
var container = documentgetElementById(’container’); 
for(var i =  len = someArraylength; i < len;  i++) { 
   containerinnerHtml += ’my number: ’ + i; 
   consolelog(i); 
} 
我要給留言改進這段代碼的人額外驚喜！歡迎大家留言討論！ 

 快速構建字串 

要對一個數組或對象做循環操作時不要老惦記著一表人才的for語句拿點創意出來嘛！明明就還有很多更快的辦法 
復制內容到剪貼板代碼: 
var arr = [’item ’ ’item ’ ’item ’ ]; 
var list = ’<ul><li>’ + arrjoin(’</li><li>’) + ’</li></ul>’; 
引用: 
“沒那麼多繁文缛節來煩你你就信我一次好了（或者你也可以自己試一試）—— 這真的是迄今能找到的最快辦法了！ 

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

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

– Douglas Crockford 
復制內容到剪貼板代碼: 
var name = ’Jeffrey’; 
var lastName = ’Way’; 
function doSomething() {} 
consolelog(name); // Jeffrey   
更好的寫法 
復制內容到剪貼板代碼: 
var DudeNameSpace = { 
   name : ’Jeffrey’ 
   lastName : ’Way’ 
   doSomething : function() {} 
} 
consolelog(DudeNameSpacename); // Jeffrey 
注意看我們是如何戲劇化地把“亂七八糟的腳印”都歸到“DudeNameSpace”這對象之下的 

 寫好注釋 

可能一開始你會覺得並無必要但相信我你將來會主動想要盡可能寫好代碼的注釋的當你幾個月後再回看某項目時結果卻發現很難想起當時寫某句東西時腦子在想的什麼了是不是很讓人沮喪呢？或者如果有同事要修訂你的代碼呢？一定一定要為你代碼裡的重要部分加上注釋 
復制內容到剪貼板代碼: 
// 遍歷數組輸出各自名稱 
for(var i =  len = arraylength; i < len; i++) { 
   consolelog(array); 
} 
 試試漸進增強 

一定要記得為未啟用JavaScript的情況提供替代方案大家可能會認為“大部分我的訪客都啟用了JavaScript的我才不用擔心”這樣的話你可就大錯特錯了！ 

你有沒有試過看看禁用JavaScript後你那漂亮的滑動器都成啥樣了？（你可以下載 Web Developer ToolBar 輕松完成這項任務）禁用之後你的網站可能就徹底失去了可用性！經驗之談開發初期總是按照沒有JavaScript來設計你的網站之後再進行漸進地功能增強小心翼翼地改變你地布局

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20412.html