|
对付初学编程说话的伴侣来说，常常会犯一些较量“经典”的错误。在这一系列文章中，我们将先容怎样让初学编程的伴侣停止一些根基的错误，而且相识怎样正确的编程和开拓代码。
这一篇文章中，我们先容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篇 （编辑：湖南网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
