JS的那些“小事”
2012-11-24 22:10
405 查看
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
相关文章推荐
- 入门 node.js 你必须知道的那些事
- 那些你不知道的js使用技巧
- 谈谈React那些小事
- 谈谈React那些小事
- 多说自定义CSS动感头像和多说评论显示User Agent的那些小事
- 用js来实现那些数据结构(数组篇02)
- node.js那些事
- js面向对象编程:if中可以使用那些作为判断条件呢?
- java那些小事---java的四舍五入
- 成都:地震中那些感人的小事
- js中内置函数有那些
- 关于Android实现 退出登录那些小事?
- 分针网—IT教育: 谈谈React那些小事
- 关于重构JS前端框架的失败经验(顺便怀念那些死去的代码)
- HTML5那些故事:Canvas的KineticJS图片教程!
- ios 关于Debug,ForBeta,Release 的那些小事。
- C++编译链接的那些小事
- C++编译链接的那些小事
- mogodb的一些小事 mongodb+express+node.js增删改查
- 编程的那些小事(1)内敛函数_指针