应当避免的JavaScript编程问题

亦凉 2022-06-08 20:24 147阅读 0赞

如果刚开始学习JavaScript，无论完全自己写程序，或者使用一些框架 (jQuery, Mootools, Dojo, YUI) ,下面这几个错误你必须要避免, 它们都是我学习JavaScript的经验之谈。

等价比较(Equality Operator)

JavaScript中有两个相等比较操作符.第一个就是两个等于号(==),它只比较值是否相等，而不关心数据类型。例如，当比较1和true时,结果为true.

**if**(1==**true**)\{

*//这部分代码会被运行*

以下是几个不同的例子.

1 == "1"        //true
    "true" == true  //false
    1 == true       //true
    "0" == 0        //true
    "" == 0         //true
    " " == 0        //true
    "Str" == false  //false
    "Str" == true   //false

如果不了解javaScript的**==**操作符，其中一些结果可能有点出乎意料.事实上它们都被转换成Number类型进行比较的.

比如第一个例子 (1**==** “1″).左边已经是一个数值了，不需要转换.右边是一个字串，它会被转为数值1.

第二个例子(“true”**==** true)结果为false是因为字串包含的是字符，而不是数字符号,它会被转为NaN，表示Not a Number. 任何值同NaN相比,结果就是false.

可以使用Number构造函数来检查转换的结果。下面是使用FireBug测试的结果.

![1343053271_3833.png][]

三个等于号的全等比较符，除了比较值之外，还会比较数据类型.如果数据类型也不同，结果就是false.只有当数据类型和值都相同时结果才为true.

4===4         //true
    "2"===2       //false
    1===true      //false
    "true"===true //false

不为引用类型赋NULL

当引用类型变量(object or Array)不再使用时，没有给它赋NULL是一个常见的错误.看看下面的例子:

var arr=[1,2,3];
     
    //执行一些操作
     
    //当不再使用时，赋NULL
    arr =null;

这样做最大的好处就是可以让JavaScript引擎的垃圾回收器可以及时释放被占用的内存.如果变量的作用域近似于全局变量，及时赋NULL就很重要了.局部变量会在离开作用域时被自动解构(特别是使用Mark and Sweep垃圾回收( garbage collector )算法的引擎, WebKit使用的就是这种算法.).

引用类型变量的初始化 (Reference Variable Initialization)

永远不要在单行赋值语句中为多个引用类型变量(object and array)赋值.用下面的例子可以更好地理解.

<table style="border-style:solid; border-width:1.0px 1.0px 1.0px 1.0px; border-color:#e7e7e7 #e7e7e7 #e7e7e7 #e7e7e7; padding:3.0px 0.0px 3.0px 0.0px; border-collapse:collapse"> 
 <tbody> 
 <tr> 
 <td style="width:62px; padding-top:0px; padding-right:5px; padding-bottom:0px; padding-left:5px"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td style="width:579.0px; padding:0.0px 5.0px 0.0px 5.0px"> var arr1=[1,2,3] &nbsp; , arr2=['a','b','c']; &nbsp; //重置两个数组 arr1 = arr2=[]; //为两个数组各增加一项 arr2.push(32); arr1.push(10); &nbsp; //输出看到相同的结果//OUTPUT: 10, 32 alert( arr1.join()); alert( arr2.join()); </td> 
 </tr> 
 </tbody> 
</table>

第1行和第2行分别创建了两个数组.然后在第5号它们都被清空了,但这个语句的问题是同时把arr1和arr2都指向了相同的数组,而不再是之前各自独立的数组.  所以改变其中一个就也自动体现到另一个.

在第8行为arr2增加了32,在第9行,为arr1增加了一个10.通过检查13行和14行的输出结果可以看到两个数组有相同的内容.

不要忘记使用var

在JavaScript中，可以使用var定义变量, 但是也可以不使用var直接定义. 这两种方式有很大的不同.看看下面的例子:

function createVar(){
      var myVar='local';
    };
     
    alert( myVar );//输出:undefined

上面例子中有一个使用var定义的变量myVar, 它在函数外就无法访问了.下面的例子将不使用var定义变量.

function createVar(){
      myVar ='local';
    };
     
    alert( myVar );//输出:local

可以看到不使用var定义的变量myVar在全局作用域也可以访问. 换句话说var定义的是局部变量.在JavaScript声明变量一定要小心,尽量在使用它们前用var来声明.

没有使用事件代理 (Not Using Event Delegation)

JavaScrip中加入(attach)一个事件处理程序很容易. 下面的例子就为指定ID的元件指定了一个click事件处理程序.

document.getElementById('myLink').addEventListener('click',**function**()\{

*//you code goes here...*\},**false**);

假设你要为所有的td元件增加一个click事件处理程序.需要为表中的每个td项写一个处理程序吗?

事件代理程序可以简化这件事.为整个表myTable指定一个clikc事件处理程序，然后在其内容检查是不是某个td被点击了.这样就不需要为每个td项指定事件处理程序了, 这样的程序就是所谓的事件代理.下面是它的代码:

document.getElementById( 'myTable' ).addEventListener( 'click', function( e ) {
          if( e.target && e.target.nodeName == 'TD' ) {
             console.log( e.target.innerHTML );
     
             //to access id
             //console.log( e.target.id );
     
             //to access className
             //console.log( e.target.className );
          }
       }, false );

innerText与 innerHTML

JavaScript开发的新丁常常会搞混innerText和innerHTML.它们都由DOM元件调用. innerHTML将取得元件内部的HTML代码，而innerText只是取得元件中的文本内容.

![1343053310_3134.png][]

Html中的黑色的部分将是innerHTML属性的输出结果.其中HTML标签也被输出了.

再来看一个innerText的例子.

![1343053329_3790.png][]

可以看到innerText只取得了文本内容，而没有HTML标签..

批量添加节点(Adding Nodes in Bulk)

为DOM元件添加一系列节点是比较普遍的.比如将Ajax调用返回的名字列表加入到ul元件中.下面是一种做法:

这个方法的问题是使用for循环添加各项到列表，DOM每次都立即进行更新，这样会降低程序的性能.

*“DocumentFragment* 是一个轻量级的*document,*而且不会直接显示在网页上*.”*

相同的结果也可以使用DocumentFragment达到, 而且只在最后更新到网页,从而不致对网页影响太大.下面就是改写的例子.

John Resig有一篇很棒的 [博客][Link 1] 详细解释了DocumentFragment以及它对性能的影响.

使用innerHTML操作DOM (DOM Manipulation using innerHTML)

永远不要对innerHTML使用\+=来添加新的标签.无论什么时候修改innerHTML,DOM都会被更新(浏览器需要重新绘制).所以使用\+=操作符添加新的标签也会降低性能,在循环里使用将更为严重.

var container = document.getElementById( 'container' );
 
 for( var i = 1; i <= 10; ++i ) {
 container.innerHTML += 'Item ' + i + ' ';}

可以使用一个临时变量来存储要添加的内容. 下面是一个例子:

var container = document.getElementById( 'container' )
 , str = '';
 
 for( var i = 1; i <= 10; ++i ) {
 str += 'Item ' + i + ' ';}
 
 container.innerHTML += str;

转载请注明出处:http://blog.csdn.net/horkychen

原文地址:[http://www.ifadey.com/2011/05/javascript-mistakes-you-must-avoid/][http_www.ifadey.com_2011_05_javascript-mistakes-you-must-avoid]

Reference:**[你可能会犯的11个JavaScript错误][11_JavaScript]**

[1343053271_3833.png]: https://img-my.csdn.net/uploads/201207/23/1343053271_3833.png
[1343053310_3134.png]: https://img-my.csdn.net/uploads/201207/23/1343053310_3134.png
[1343053329_3790.png]: https://img-my.csdn.net/uploads/201207/23/1343053329_3790.png
[Link 1]: http://ejohn.org/blog/dom-documentfragments/
[http_www.ifadey.com_2011_05_javascript-mistakes-you-must-avoid]: http://www.ifadey.com/2011/05/javascript-mistakes-you-must-avoid/
[11_JavaScript]: http://www.yinzhili.com/2011/07/the-10-javascript-mistakes-youre-making.html