js应避免的错误

 

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

这一篇文章中,我们介绍5个javascript代码开发中需要注意的问题和技巧。

冗余的DOM操作

DOM操作众所周知是比较重量级的。有效的限制交互可以大大的帮助你提高你的代码的性能。看看下面这段代码:

// anti-pattern

for (var i = 0; i < 100; i++){

var 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 += “

  • This is list item #” + (99- i);  

    }

    document.getElementById(“someUL”).innerHTML(liststring);

  • 以上代码只调用了一次DOM操作,但是大量使用了字符串的连接操作。除了使用字符串连接,我们可以使用数组来显示。

    var liststring = “

  • ”  

    var lis = [];

    for (var i = 100; i > 0; i--){

    lis.push(“This is list item #” + (99- i));

    }

    liststring += lis.join(“

  • ”) + “
  • ”;  

    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:

    .......

    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)