减少重复功能的JavaScript重量

我并不完全是一个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="";

}
}

使用循环：

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

---

就性能而言，您所拥有的是最有效的，但就可维护性而言，这是首选。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;
}

---

可以使用循环和数组

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

---

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

}

---

虽然这段代码显然更加紧凑，但每次调用data_copy函数时，它仍会一遍又一遍地向DOM查询相同的元素。因此，就性能而言，这并不像看上去那么有效。显然不是。但作为一个新手，我试图提供一个简单的解决方案。从外观上看，这不是一个值得优化性能的地方过早优化是万恶之源。