欢迎您访问我爱IT技术网，今天小编为你分享的编程技术是：【初学者应该了解的编程陷阱：javascript篇】，下面是详细的分享！
初学者应该了解的编程陷阱：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=http://www.chinaz.com/program/2012/1204/“someimage.jpg”><img src=http://www.chinaz.com/program/2012/1204/“someimage-thumb.jpg”></a>
<a href=http://www.chinaz.com/program/2012/1204/“someimage.jpg”><img src=http://www.chinaz.com/program/2012/1204/“someimage-thumb.jpg”></a>
<a href=http://www.chinaz.com/program/2012/1204/“someimage.jpg”><img src=http://www.chinaz.com/program/2012/1204/“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篇
以上所分享的是关于初学者应该了解的编程陷阱：javascript篇，下面是编辑为你推荐的有价值的用户互动：
相关问题：如何循序渐进有效学习 JavaScript
答：第一阶段：《JavaScript DOM编程艺术》 看这本书之前，请先确认您对Javascript有个基本的了解，应该知道if else之类的语法，如果不懂，先去看看我第二阶段推荐的 《Javascript高级程序设计》的前三章，记住看三章就别往下看了，回到《JavaScript... >>详细
相关问题：如何正确学习JavaScript
答：如今使用Javascript框架和插件构建的Web应用越来越多，并且已经能够实现3D动画特效、可交互的信息图等很有趣又实用的效果，如果想要做Web开发，Javascript是必需品。 目前自己的知识库中只对HTML和CSS这类非编程类的语言比较熟悉且能熟练应用。... >>详细
相关问题：如何正确学习JavaScript
答：学习JS的忠告 1，不要着急看一些复杂网页效果的代码，这样除了打击自信心，什么也学不到。 2，别急着加技术交流QQ群，加牛人QQ。如果找张三丰交流武功。 3，看网上什么多少天精通JS，啥啥啥从入门到精通，这种教程直接跳过吧，太多的事实证明，... >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）