減少重複功能的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重量

回答

相關問題