文档详情

初学者应该了解的编陷阱:javascript篇.doc

发布:2017-05-09约3.22千字共6页下载文档
文本预览下载声明
对于初学编程语言的朋友来说,经常会犯一些比较“经典”的错误。在这一系列文章中,我们将介绍如何让初学编程的朋友避免一些基本的错误,并且了解如何正确的编程和开发代码。 这一篇文章中,我们介绍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 += “liThis 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(“/lili”) + “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
显示全部
相似文档