Question

我不是一个JS专业人士，虽然不漂亮或不高效，但这很有效。

实际上我在表单中有重复的字段组，并允许用户将数据从第一个复制到全部5个。如果需要的话。

如何提高此代码的效率？

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="";

}
}

Answer 1

使用循环：

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;
}

Answer 2

您所拥有的在性能方面最有效，但对于可维护性，这是首选。 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;
}

Answer 3

您可以使用循环和数组。

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

Answer 4

我建议缓存对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 : '';

}

减少重量函数的JavaScript权重

4 个答案: