20條常見的編碼陷阱之JavaScript篇

　　不管你現在的編程技能有多麼的高超曾經你也是個亦步亦趨不斷的學習的初學者在編程這條曲折的道路上我想你肯定犯過一些低級的錯誤遇見過一些普通的編碼陷阱

　　不必要的DOM操作

　　例如下面這段代碼

　　// antipattern

　　for （var i = ; i < ; i++）{

　　var li = $（<li>）html（This is list item # + （i+））

　　$（#someUL）append（li）

　　}

　　這段代碼對DOM進行了次修改並且創建了個不必要的jQuery對象正確的做法是使用一個文檔片段或者創建一個字符串把個<li>元素賦給該字符串然後附加到HTML中這樣就只需運行DOM一次代碼如下

　　var liststring = ;

　　for （var i = ; i > ; i）{

　　liststring += <li>This is list item # + （ i）

　　}

　　documentgetElementById（someUL）innerHTML（liststring）

　　正如上面所描述的一樣下面再提供一個方式使用數組

　　var liststring = <li>

　　var lis = [];

　　for （var i = ; i > ; i）{

　　lispush（This is list item # + （ i））

　　}

　　liststring += lisjoin（</li><li>） + </li>;

　　documentgetElementById（someUL）innerHTML（liststring）

　　這是在JavaScript創建重復HTML最快最簡單的方法無需使用模板庫或框架

　　不一致的變量名和函數名

　　這個問題是非常重要的尤其當你在別人的代碼上工作時一定要保持標識符（變量名和函數名）一致例如下面這段代碼

　　var foo = bar;

　　var plant = green;

　　var car = red;

　　通常人們並不會設置變量名叫Something這涉及到命名規則問題命名應清晰明了一目了然很多編程語言地變量命名都使用大寫

　　下面是對函數的命名

　　function subtractFive（number）{

　　return number ;

　　}

　　語法結構清晰並且能起到解釋性功能

　　例如想要對給定的數字加仍采用上述命名模式比如

　　function addFive（number）{

　　return number + ;

　　}

　　有時你會根據返回值命名例如該函數要返回一個HTML字符串那麼可以命名為getTweetHTML（）如果函數只是做一些操作無需返回值那麼可以在前面加一個do前綴例如doFetchTweets（）

　　構造函數通常會遵循類原則大寫第一個字母

　　function Dog（color）{

　　lor = color;

　　}

　　命名應帶有描述性比如操作型的函數在前面加do另外要具備可讀性和提示性

　　在for…Loops中使用hasOwnProperty（）方法

　　JavaScript數組是沒有關聯的可以把它當做哈希表使用循環來遍歷對象屬性

　　for （var prop in someObject） {

　　alert（someObject[prop]） // alerts value of property

　　}

　　然而存在的問題是for…in loop是在對象屬性鏈上遍歷每個枚舉類型的屬性如果你只想使用對象實際擁有的屬性這可能有問題的那怎麼解決呢？你可以使用hasOwnProperty（）方法代碼如下

　　for （var prop in someObject） {

　　if （someObjecthasOwnProperty（prop）） {

　　alert（someObject[prop]） // alerts value of property

　　}

　　}

　　比較布爾值

　　把布爾值作為條件進行比較其實這是在浪費電腦的計算時間看下面這個例子吧

　　if （foo == true） {

　　// do something for true

　　} else {

　　// do something for false

　　}

　　其實foo==true這個比較完全是多余的因為foo已經是布爾類型直接這樣寫就行

　　if （foo） {

　　// do something for true

　　} else {

　　// do something for false

　　}

　　又或者這樣寫

　　if （！foo） {

　　// do something if foo is false

　　} else {

　　// do something if foo is true

　　}

　　事件綁定

　　在JavaScript中事件是個復雜的問題事件冒泡（event bubbling）和委托正在取代內聯事件（inline onclick）操作（一些特殊的初始頁除外）

　　假設你有一個圖片網格需要啟動一個modal lightbox窗口千萬不要采取下面的做法示例采用的是jQuery如果你使用相似的庫或者其他冒泡機制也同樣適合傳統的JavaScript

　　相關的HTML代碼

　　<div id=gridcontainer>

　　<a ><img src=someimagethumbjpg></a>

　　<a ><img src=someimagethumbjpg></a>

　　<a ><img src=someimagethumbjpg></a>

　　…

　　</div>

　　不好的JavaScript寫法

　　$（a）on（click function（） {

　　callLightbox（this）

　　}）

　　這段代碼假設調用lightbox裡面傳遞一個anchor元素並且引用全屏圖片與其綁定每個anchor元素還不如直接使用#gridcontainer元素

　　$（#gridcontainer）on（click a function（event） {

　　callLightbox（eventtarget）

　　}）

　　在這段代碼中this和eventtarget都表示anchor元素同樣你也可以在任何父元素上使用只要保證所定義的元素是事件目標就行（events target）

　　避免三元冗余

　　在JavaScript和PHP中過度使用三元語句是很常見的事情

　　// javascript

　　return footoString（） !== ? true : false;

　　// php

　　return （something（）） ? true : false;

　　條件判斷的返回值永遠只有false和true言外之意就是你無需把true和false顯示添加到三元運算中相反你只需簡單的返回條件

　　// javascript

　　return footoString（） !== ;

　　// php

　　return something（）

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