注册|登录

联系电话:024-31891684  13390130939
日志

沈阳软件开发_沈阳软件公司_沈阳软件定制/软件/日志

Log日志

JavaScript编码陷阱之一不必要的DOM操作

浏览量:3338

在学习软件开发编程的过程中,我们这些初学者经常会遇到这样或那样的编程陷阱,在此列出关于javascript编程遇到的一些陷阱。

不必要的DOM操作

例如下面这段代码: 

  • for (var i = 0; i < 100; i++){  
  •    var li = $("<li>").html("This is list item #" + (i+1));  
  •    $("#someUL").append(li);  

这段代码对DOM进行了100次修改,并且创建了100个不必要的jQuery对象。正确的做法是使用一个文档片段,或者创建一个字符串,把100个<li>元素赋给该字符串。然后附加到HTML中。这样就只需运行DOM一次,代码如下:

  • var liststring = "";  
  • for (var i = 100; i > 0; i--){  
  •    liststring += "<li>This is list item #" + (99- i);  
  • }  
  • document.getElementById("someUL").innerHTML(liststring);

正如上面所描述的一样,下面再提供一个方式,使用数组:

  • 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);

这是在JavaScript创建重复HTML最快最简单的方法,无需使用模板库或框架。

沈阳团购网|营口网站制作|沈阳软件公司|软件定制|网站建设|加盟易势|提交问题