减少重复功能的JavaScript重量

我不完全是一个JS专业版，虽然不漂亮或高效，但它的工作原理。减少重复功能的JavaScript重量

实际上，我在表单中重复字段组，并允许用户将数据从第一个数据复制到第五个数据（如果他们想要的话）。

如何让此代码更高效？

function data_copy() { 
if(document.pixelform.copy[0].checked){ 

document.pixelform.pixelpostclickinterval2.value=document.pixelform.pixelpostclickinterval1.value; 
document.pixelform.pixelpostviewinterval2.value=document.pixelform.pixelpostviewinterval1.value; 
document.pixelform.pixelsegmentinterval2.value=document.pixelform.pixelsegmentinterval1.value; 

document.pixelform.pixelpostclickinterval3.value=document.pixelform.pixelpostclickinterval1.value; 
document.pixelform.pixelpostviewinterval3.value=document.pixelform.pixelpostviewinterval1.value; 
document.pixelform.pixelsegmentinterval3.value=document.pixelform.pixelsegmentinterval1.value; 

document.pixelform.pixelpostclickinterval4.value=document.pixelform.pixelpostclickinterval1.value; 
document.pixelform.pixelpostviewinterval4.value=document.pixelform.pixelpostviewinterval1.value; 
document.pixelform.pixelsegmentinterval4.value=document.pixelform.pixelsegmentinterval1.value; 

document.pixelform.pixelpostclickinterval5.value=document.pixelform.pixelpostclickinterval1.value; 
document.pixelform.pixelpostviewinterval5.value=document.pixelform.pixelpostviewinterval1.value; 
document.pixelform.pixelsegmentinterval5.value=document.pixelform.pixelsegmentinterval1.value; 

} else { 

document.pixelform.pixelpostclickinterval2.value=""; 
document.pixelform.pixelpostviewinterval2.value=""; 
document.pixelform.pixelsegmentinterval2.value=""; 

document.pixelform.pixelpostclickinterval3.value=""; 
document.pixelform.pixelpostviewinterval3.value=""; 
document.pixelform.pixelsegmentinterval3.value=""; 

document.pixelform.pixelpostclickinterval4.value=""; 
document.pixelform.pixelpostviewinterval4.value=""; 
document.pixelform.pixelsegmentinterval4.value=""; 

document.pixelform.pixelpostclickinterval5.value=""; 
document.pixelform.pixelpostviewinterval5.value=""; 
document.pixelform.pixelsegmentinterval5.value=""; 

} 
}

来源

2011-06-24 Dan

使用一个循环：

for (var i = 2; i <= 5; i++) 
{ 
    document.pixelform["pixelpostclickinterval" + i].value=document.pixelform.pixelpostclickinterval1.value; 
    document.pixelform["pixelpostviewinterval" + i].value=document.pixelform.pixelpostviewinterval1.value; 
    document.pixelform["pixelsegmentinterval" + i].value=document.pixelform.pixelsegmentinterval1.value; 
}

来源

2011-06-24 12:21:22

虽然这段代码绝对更紧凑，但每次调用'data_copy'函数时，它仍会一遍又一遍地查询DOM相同的元素。所以，在性能方面，这并不像看起来那么高效。 –

显然不是。但是，作为一名新手，我试图提供一个简单的解决方案。从它的角度来看，这不是一个值得优化性能的地方（“过早优化是万恶之源”）。 –

你有什么是最有效的在性能方面，但对于可维护性，这是首选。 JavaScript对象是字典，因此可以使用索引键名称来访问属性。

var postclickinterval = ""; 
var postviewinterval = ""; 
var segmentinterval = ""; 

if (document.pixelform.copy[0].checked) 
{ 
    postclickinterval = document.pixelform.pixelpostclickinterval1.value; 
    postviewinterval = document.pixelform.pixelpostviewinterval1.value; 
    segmentinterval = document.pixelform.pixelsegmentinterval1.value; 
} 


for (var i = 2; i <= 5; i++) 
{ 
    document.pixelform["pixelpostclickinterval" + i].value = postclickinterval; 
    document.pixelform["pixelpostviewinterval" + i].value = postviewinterval; 
    document.pixelform["pixelsegmentinterval" + i].value = segmentinterval; 
}

来源

2011-06-24 12:25:05

您可以使用循环和数组。

var pixelInfo = ['postview','postscript','segment']; 
function copydata() { 
     if (document.pixelform.copy[0].checked){ 
      for (var i=2; i<6; i++) { 
       for (var j=0; j<3; j++) { 
       (function(idx,info){ 
        document.pixelform['pixel'+pixelInfo[info]+idx].value = 
         document.pixelform['pixel'+pixelInfo[info]+'1'].value; 
       })(i,j); 
       } 
      } 
     } else { 
      for (var i=2; i<6; i++) { 
       for (var j=0; j<3; j++) { 
        (function(idx,info){ 
         document.pixelform['pixel'+pixelInfo[info]+idx].value = ""; 
       })(i,j); 
       } 
      } 
     } 
     }

来源

2011-06-24 12:28:34 YeJiabin

我会推荐给缓存参考document.pixelform避免一遍又一遍的查询DOM的相同元素，以避免过多的财产查找。

// Look up the elements only once 
var pf = document.pixelform, 
    pci2 = pf.pixelpostclickinterval2, 
    pci3 = pf.pixelpostclickinterval3, 
    pci4 = pf.pixelpostclickinterval4, 
    pci5 = pf.pixelpostclickinterval5, 
    pvi2 = pf.pixelpostviewinterval2, 
    pvi2 = pf.pixelpostviewinterval2, 
    pvi2 = pf.pixelpostviewinterval2, 
    pvi2 = pf.pixelpostviewinterval2, 
    pvi2 = pf.pixelpostviewinterval2, 
    si2 = pf.pixelsegmentinterval2, 
    si3 = pf.pixelsegmentinterval3, 
    si4 = pf.pixelsegmentinterval4, 
    si5 = pf.pixelsegmentinterval5; 

function data_copy() { 

    var checked = pf.copy[0].checked, 
     pci = pci1.value, 
     pvi = pvi1.value, 
     si = si1.value; 

    pci2.value = checked ? pci : ''; 
    pvi2.value = checked ? pvi : ''; 
    si2.value = checked ? si : ''; 

    pci3.value = checked ? pci : ''; 
    pvi3.value = checked ? pvi : ''; 
    si3.value = checked ? si : ''; 

    pci4.value = checked ? pci : ''; 
    pvi4.value = checked ? pvi : ''; 
    si4.value = checked ? si : ''; 

    pci5.value = checked ? pci : ''; 
    pvi5.value = checked ? pvi : ''; 
    si5.value = checked ? si : ''; 

}

来源

2011-06-24 12:52:01

减少重复功能的JavaScript重量

回答

相关问题