初学者应该了解的编程陷阱javascript篇

发布日期：2017/6/20

百度权重查询 站长交易 友情链接交换 网站监控 服务器监控 seo监控

对于初学编程语言的同伙来说，经常会犯一些比较“经典”的错误。在这一系列文章中，我们将介绍如何让初学编程的同伙避免一些基本的错误，并且了解如何准确的编程和开发代码。

这一篇文章中，我们介绍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=“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中：

// javascriptreturn foo.toString（） ！== “” ？ true ： false;

// php

return （something（）） ？ true ： false;

但是条件比较永远返回true或者false，所以你没有需要清楚的添加返回值。以下代码即可：

// javascriptreturn foo.toString（） ！== “”;

// php

return something（）;

希望大家能够理解并且了解如何避免代码书写中的问题，假如你有其它的例子，请与我们分享！

来源：初学者应该了解的编程陷阱：javascript篇