JS的那些“小事”

1.在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
    }
}

2.事件绑定

在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）。

以上引自：http://www.csdn.net/article/2012-11-19/2811978-20-All-Too-Common-Coding-Pitfalls-For-Be