日期:2012-12-4 来源:GBin1.com
对于初学编程语言的朋友来说,经常会犯一些比较“经典”的错误。在这一系列文章中,我们将介绍如何让初学编程的朋友避免一些基本的错误,并且了解如何正确的编程和开发代码。
这一篇文章中,我们介绍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个<li/>元素,然后再添加到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中:
//
javascript
return
foo.toString() !== "" ? true
: false
;
//
php
return
(something()) ? true
: false
;
但是条件比较永远返回true或者false,所以你没有必要清楚的添加返回值。以下代码即可:
//
javascript
return
foo.toString() !== "";
//
php
return
something();
希望大家能够理解并且了解如何避免代码书写中的问题,如果你有其它的例子,请与我们分享!
来源:初学者应该了解的编程陷阱:javascript篇
分享到:
相关推荐
适用人群: 这篇文章适合对JavaScript感兴趣的开发者,无论是初学者还是有一定经验的开发者。无论你是前端工程师、全栈开发者,还是对JavaScript编程感兴趣的学生,这篇文章都能为你提供有用的知识和技巧。 使用场景...
Solidity编程 - 构建以太坊和区块链智能合约的初学者指南
《Solidity编程:构建以太坊和区块链智能合约的初学者指南》_毛明旺等译_2019-01-01
初学者编程入门:C++实用技巧讲解.pdf\ 自己学习c++用到的资料
JSP2 编程指南:从初学者到专家下载 JSP2 编程指南:从初学者到专家下载
JSP2 编程指南:从初学者到专家 英文版
初学者必备的网络编程基础篇之javascript.
Python编程初学者指南.pdf
javascript基础:供新人初学者学习
内容提要: 本书是为Python初学者量身打造的一本书,其特色在于通过众多较小的、有趣的游戏编程实例来教授Python编程知识,让学习Python的过程充满了乐趣。本书详细介绍了Python类型、变量、I/O,流程控制,循环,...
JSP2 编程指南:从初学者到专家.rar
C#初学者编程实例,同大家学习交流,带有源代码
《JSP2 编程指南:从初学者到专家》.rar
分三部分上传,此为卷三 内容简介 本书旨在向读者介绍以JavaScript为核心的RIA... 本书适合JavaScript初学者、从事JavaScript开发,寻求进阶的前端开发人员、Web前端架构师阅读,也可作为大中专院校相关专业的教材。
高清带目录《Box2D物理游戏编程初学者指南》系统地梳理学习Box2D物理游戏编程的各个知识点,并通过图解、问答、举例等形式深入浅出地讲解初学者觉得晦涩难懂的概念、术语。 《Box2D物理游戏编程初学者指南》最后,...
FSM初学者教程 FSM编程-菜鸟入门(清晰版)
软件介绍 讲述了JSP的基本技术,包括控制、指令、代码等,很全面,是一本很好的JSP指导手册,英文,原名称:Beginning JSP 2 From Novice to Professional Tags: JSP2 编程指南:从初学者到专家(CHM)
150个C#初学者编程实例 150个C#初学者编程实例 150个C#初学者编程实例
千锤百炼之后,终于总结出了一整套从零开始的贯穿始终的编程逻辑,特别适合初学者进入程序员的殿堂,也能帮助有一定经验的程序员快速编写代码。 这是一本真正告诉初学者如何通过推理进行编程的书,而不是介绍语法的...
网络编程基础篇之Javascript、适合初学者 exe文件