初學者應該瞭解的編程陷阱：javascript篇

對於初學程式設計語言的朋友來說，經常會犯一些比較“經典”的錯誤。在這一系列文章中，我們將介紹如何讓初學編程的朋友避免一些基本的錯誤，並且瞭解如何正確的編程和開發代碼。

這一篇文章中，我們介紹5個javascript代碼開發中需要注意的問題和技巧。

冗餘的DOM操作

DOM操作眾所周知是比較重量級的。有效限制互動可以大大的協助你提高你的代碼的效能。看看下面這段代碼：

// anti-pattern

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

var li = $（“<li>”）.html（“This is list item #” + （i+1））; 

 

$（“#someUL”）.append（li）;

}

這段代碼迴圈修改DOM100次，但是建立了100個jQuery對象。更好的方式是使用document片段，或者建立一個String來包含100個

元素，然後再添加到DOM中去。這裡你只需要執行一次DOM操作。 

最佳化後的代碼：

var liststring = “”;

for （var i = 100; i > 0; i--）{

liststring += “<li>This is list item #” + （99- i）;  

}

document.getElementById（“someUL”）.innerHTML（liststring）;

以上代碼只調用了一次DOM操作，但是大量使用了字串的串連操作。除了使用字串串連，我們可以使用數組來顯示。

var liststring = “<li>”  

var lis = ［］;

for （var i = 100; i > 0; i--）{

lis.push（“This is list item #” + （99- i））;

}

liststring += lis.join（“</li><li>”） + “<li>”;  

document.getElementById（“someUL”）.innerHTML（liststring）;

當建立大量的字串時，儲存每一個字串到數組裡，然後調用join（）方法來串連。在javascript中，這是不使用模板類庫和架構外的最高效的字串串連操作方式。

線上調試

變數和方法名不一致

這可能不是一個效能問題，但是對於編程來說非常重要，特別是當你需要維護別人的代碼。看看如下例子：

var foo = “bar”;

var plant = “green”;

var car = “red”;

如果你再添加一個變數叫“something”可能就不是那麼合適了，你應該保持命名的一致。這也就是為什麼在一些程式設計語言中，我們使用大寫變數名來代表常量。

對於方法來說，我們也需要保持一致，如下：

function subtractFive（number）{

return number - 5;

}

如果你有一個以上的減5方法，那麼你如果定義加5方法的話，應該使用如下命名方式：

function addFive（number）{

return number + 5;

}

有時候如果你定義一個返回方法，那麼一般使用getXXX（），如果你只是執行操作不返回，那麼最好使用doXXX（）方法名。

構造器方法最好使用類似其它語言的命名方式，首字母大寫，如下：

function Gbin1（color）{

this.color = color;

}

不管怎麼，你都應該盡量的讓你的命名更加富有意義，能夠給別人更多的資訊。

在for..in迴圈中使用 hasOwnProperty 方法

在javascript中數組是不關聯的。而對象來說是hashtable類型的。你可以使用for 。.. in迴圈來迭代對象屬性。如下：

for （var prop in someObject） {

alert（someObject［prop］）; // alert‘s value of property

}

但是問題在於，以上代碼會迴圈proptype chain中的所有的屬性，有時候這樣會出錯，你可能只想使用實際存在的屬性。使用hasOwnProperty方法可以協助你解決這個問題。

for （var prop in someObject） {

if （someObject.hasOwnProperty（prop）） {

alert（someObject［prop］）; // alert‘s value of property

}

}

這個方法可以協助你得到實際存在的屬性值。

比較boolean值

比較boolean值非常浪費計算時間。看看下面這個例子：

if （foo == true） {

// do something for true

} else {

// do something for false

}

注意上面的==true條件，這個非常沒有必要因為foo本身就是boolean值。如果比較，應該使用如下代碼：

if （foo） {

// do something for true

} else {

// do something for false

}

或者測試foo為false，如下：

if （！foo） {

// do something for true

}else {

// do something for false

}

事件綁定

事件在javascript中是非常的複雜的話題。以往我們使用行內oncick事件的時代已經過去了。。

我們應該使用事件bubbling或者delegation。

舉個例子，如果我們需要讓一組圖片展示到lightbox window裡。那麼下面這段代碼你絕對不應該使用。

這裡我們使用jQuery作為例子。

HTML：

<div id=“grid-container”>

<a href=“someimage.jpg”><img src=“someimage-thumb.jpg”></a>

<a href=“someimage.jpg”><img src=“someimage-thumb.jpg”></a>

<a href=“someimage.jpg”><img src=“someimage-thumb.jpg”></a>

.......

</div>

Javascript（不推薦的寫法）：

$（‘a’）.on（‘click’， function（） {

callLightbox（this）;

}）;

這樣書寫會導致綁定事件到每一個連結元素，最好綁定到指定的圖片容器，如下：

$（“#grid-container”）.on（“click”， “a”， function（event） {

callLightbox（event.target）;

}）;

線上調試

避免冗餘的比較

在javascript和PHP中：

// javascriptreturn foo.toString（） ！== “” ？ true ： false;

// php

return （something（）） ？ true ： false;

但是條件比較永遠返回true或者false，所以你沒有必要清楚的添加傳回值。以下代碼即可：

// javascriptreturn foo.toString（） ！== “”;

// php

return something（）;

希望大家能夠理解並且瞭解如何避免代碼書寫中的問題，如果你有其它的例子，請與我們分享！

來源：初學者應該瞭解的編程陷阱：javascript篇