JavaScript常见的编码陷阱

1.不必要的DOM操作

例如下面这段代码：

 
 
// anti-pattern  
for (var i = 0; i < 100; i++){  
   var li = $("<li>").html("This is list item #" + (i+1));  
   $("#someUL").append(li);  
} 

这段代码对DOM进行了100次修改，并且创建了100个不必要的jQuery对象。正确的做法是使用一个文档片段，或者创建一个字符串，把100个<li>元素赋给该字符串。然后附加到HTML中。这样就只需运行DOM一次，代码如下：

 
 
var liststring = "";  
for (var i = 100; i > 0; i--){  
   liststring += "<li>This is list item #" + (99- i);  
}  
document.getElementById("someUL").innerHTML(liststring); 

正如上面所描述的一样，下面再提供一个方式，使用数组：

 
 
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); 

这是在JavaScript创建重复HTML最快最简单的方法，无需使用模板库或框架。

2.不一致的变量名和函数名

这个问题是非常重要的，尤其当你在别人的代码上工作时，一定要保持标识符（变量名和函数名）一致，例如下面这段代码：

 
 
var foo = "bar";  
var plant = "green";  
var car = "red"; 

通常，人们并不会设置变量名叫Something，这涉及到命名规则问题，命名应清晰明了，一目了然。很多编程语言地变量命名都使用大写。

下面是对函数的命名：

 
 
function subtractFive(number){  
   return number - 5;  
} 

语法结构清晰并且能起到解释性功能。

例如想要对给定的数字加5，仍采用上述命名模式，比如：

 
 
function addFive(number){  
   return number + 5;  
} 

有时，你会根据返回值命名，例如该函数要返回一个HTML字符串，那么可以命名为getTweetHTML()，如果函数只是做一些操作，无需返回值，那么可以在前面加一个do前缀。例如doFetchTweets()。

构造函数通常会遵循类原则，大写第一个字母：

 
 
function Dog(color){  
   this.color = color;  
} 

命名应带有描述性，比如操作型的函数在前面加do，另外要具备可读性和提示性。

3.在for...Loops中使用hasOwnProperty()方法

JavaScript数组是没有关联的，可以把它当做哈希表，使用循环来遍历对象属性：

 
 
for (var prop in someObject) {  
    alert(someObject[prop]); // alert's value of property  
} 

然而，存在的问题是for...in loop是在对象属性链上遍历每个枚举类型的属性，如果你只想使用对象实际拥有的属性，这可能有问题的。那怎么解决呢?你可以使用hasOwnProperty()方法。代码如下：

 
 
for (var prop in someObject) {  
    if (someObject.hasOwnProperty(prop)) {  
        alert(someObject[prop]); // alert's value of property  
    }  
} 

4.比较布尔值

把布尔值作为条件进行比较，其实这是在浪费电脑的计算时间。看下面这个例子吧：

 
 
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  
} 

5.事件绑定

在JavaScript中，事件是个复杂的问题。事件冒泡（event bubbling）和委托正在取代内联事件（inline onclick）操作（一些特殊的“初始页”除外）。

假设你有一个图片网格，需要启动一个modal lightbox窗口。千万不要采取下面的做法，示例采用的是jQuery，如果你使用相似的库或者其他，冒泡机制也同样适合传统的JavaScript。

相关的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);  
}); 

这段代码假设调用lightbox，里面传递一个anchor元素并且引用全屏图片。与其绑定每个anchor元素还不如直接使用#grid-container元素。

 
 
$("#grid-container").on("click", "a", function(event) {  
   callLightbox(event.target);  
}); 

在这段代码中，this和event.target都表示anchor元素。同样你也可以在任何父元素上使用。只要保证所定义的元素是事件目标就行（event's target）。

6.避免三元冗余

在JavaScript和PHP中，过度使用三元语句是很常见的事情：

 
 
// javascript  
return foo.toString() !== "" ? true : false; 

 
 
// php  
return (something()) ? true : false; 

条件判断的返回值永远只有false和true，言外之意就是你无需把true和false显示添加到三元运算中。相反，你只需简单的返回条件：

 
 
// javascript  
return foo.toString() !== ""; 

 
 
// php  
return something(); 

Thanks: http://www.csdn.net/article/2012-11-19/2811978-20-All-Too-Common-Coding-Pitfalls-For-Be