- 浏览: 138905 次
文章分类
最新评论
对于初学编程语言的朋友来说,经常会犯一些比较“经典”的错误。在这一系列文章中,我们将介绍如何让初学编程的朋友避免一些基本的错误,并且了解如何正确的编程和开发代码。
这一篇文章中,我们介绍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();
希望大家能够理解并且了解如何避免代码书写中的问题,如果你有其它的例子,请与我们分享!
发表评论
-
sencha touch 隐藏滚动条样式的几种方式
2014-03-21 21:55 3016可以通过以下几种方式来隐藏滚动条,而又不影响滚动效果 ... -
sencha touch textarea 手机上不显示滚动条,且不能滚动
2014-03-21 21:53 3349最近在项目中发现 sencha touch 中的 texta ... -
js Unicode编码转换
2014-03-11 16:37 517js Unicode编码转换 /**js Un ... -
Jquery滚动条定位插件
2014-03-10 15:28 731Jquery滚动条定位插件(jquery.scrollt ... -
js实现雷达扫描效果
2013-11-13 09:23 7214etherdream的原理是使用borderWidth的 ... -
js判断右键菜单和大小写键盘是否锁定
2013-10-24 13:11 2238How do you tell if caps lock i ... -
js数组的扩展方法
2013-08-05 09:53 81011、用于清空数组 Array.prototype. ... -
js脚本
2013-07-03 21:22 915<ignore_js_op style=" ... -
数组排序
2013-05-16 11:00 512冒泡排序 Array.prototype ... -
位运算
2012-12-19 15:30 600在ECMAScript中所有的运算都是64位格式进行存储的,但 ... -
js时间运算
2012-12-05 15:41 582today.getYear()函數在IE ... -
js数据与速度优化(翻译)
2012-10-25 15:19 0javascript操作DOM树最好是一次性的进行,如果在 ... -
ScrollView图片轮转之iscoll插件解析
2012-09-05 18:10 0声明:本插件是从iscroll4官方文档中获取的,如有需要可以 ...
相关推荐
在代码的运行过程中,错误是不可避免的,总的来说,错误发生于两种情况:一是程序内部的 逻辑或者语法错误,二是运行环境或者用户输入中不可预知的数据造成的错误。对于前者,就称之为错误(error),可以通过调试...
帮助避免错误的Javascript陷阱清单(Javascript Gotchas listed to help avoid mistakes)
Hydra.js 是一个开源的 JavaScript 库,提供 Web 应用的模块化架构。其目的: 避免因为一个小错误导致整个应用挂掉 扩展性 框架 可伸缩、可维护的面向模块的系统 标签:Hydra Web框架
为了回馈我们的开发人员社区,我们查看了包含数千个项目的数据库,并发现了JavaScript中的前10大错误。我将向你展示导致它们的原因以及如何防止它们发生。如果你避免这些“陷阱”,它将使你成为更好的开发人员。 ...
js去掉前后空格方法,避免输入错误信息javascript
开发中的编码错误无法避免,但不同的解决方法则是决定性的。Deb.js虽然只有1.5KB,但是能够清理控制台窗口,让JavaScript的除错更容易。是Chrome、Opera和Safari内建的除错工具的好搭档。 标签:Debjs
详细介绍了可简单避免的三个JS发布错误,有需要的朋友可以参考一下
10.2 在JavaScript中抛出错误 10.3 抛出错误的好处 10.4 何时抛出错误 10.5 try-catch语句 10.6 错误类型 第11章 不是你的对象不要动 11.1 什么是你的 11.2 原则 11.2.1 不覆盖方法 11.2.2 不新增方法 ...
将来自JavaScript对象的字符串或数字值放入HTML模板中,该模板应避免大惊小怪,几乎没有逻辑,以及几条友好的错误消息。 这个项目提供了一个简单的界面来完成一件事情:用来自JS对象的数据填充模板,然后将其推送到...
这是一个用于在node.js更有效地处理错误的库,特别是为像我这样的人创建的,他们大多数时候使用函数提升来避免某些所谓的“回调地狱”。 安装 npm install nodeerrors 指定您自己的错误 您可以通过在项目的根文件夹...
该项目从 Foundation 的 Interchange.js 中汲取灵感,但消除了几个依赖项和错误,使用纯 JavaScript 编写,并增加了更多灵活性。 注意:Exchange.js 目前不支持 DOM 重排。 Exchange.js 不依赖于 jQuery。 它还...
如果需要查看的值很多,则使用[removed]() 方法,避免反复单击“确定”按钮; B 使用[removed] 事件 当页面出现异常时,onerror 事件会在window 对象上触发。它能在一定程度上告诉开发者相关的错误信息。 示例: ...
查看了数千个项目后,发现了 10 个最常见的 JavaScript 错误。我们会告诉你什么原因导致了这些错误,以及如何防止这些错误发生。如果你能够避免落入这些 “陷阱”,你将会成为一个更好的开发者。 JavaScript 常见...
JavaScript parseInt()与Number()区别案例详解 ...为了避免对“0”和“0x”开头的字符串解析错误,各种javascript编程规范都规定必须要明确给出第二个参数的值,如parseInt(“123”,10). parseInt('16',
例如,直接在浏览器中进行表单验证,用户只有填写格式正确的内容后才能够提交表单,这样避免了用户因表单填写错误导致的反复提交,节省了时间和网络资源,示例图如下。 初识JavaScript 2.JavaScript的诞生和发展 ...
10.2 在JavaScript中抛出错误 10.3 抛出错误的好处 10.4 何时抛出错误 10.5 try-catch语句 10.6 错误类型 第11章 不是你的对象不要动 11.1 什么是你的 11.2 原则 11.2.1 不覆盖方法 11.2.2 不新增方法 ...
一个编辑js的强大工具,可以避免很多低级错误,将更多精力投入到业务中
有关时间显示 js控制 轻松显示时间 获取客户端的时间 避免服务器在外地 而影响时间的错误显示
模板调试器可以精确定位到引发渲染错误的模板语句,解决了编写模板过程中无法调试的痛苦,让开发变得高效,也避免了因为单个模板出错导致整个应用崩溃的情况发生。 artTemplate 这一切都在 1.7kb(gzip) 中实现! ...