重構代碼的提示：非常重複的代碼

我有這個非常簡單的問題：我的代碼太重複了。它可以工作，但我相信它可能會更乾淨，但我不知道從哪裏開始。重構代碼的提示：非常重複的代碼

我想學習更好的工作，我真的很想有人幫助我。

這裏是一個非常重複我的代碼的2位（我所做的一切我自己）：

$(document).ready(function(){ 

       // Setup your Lazy Line element. 
       // see README file for more settings 
       $('#drawing1').lazylinepainter({ 
         'svgData' : dr1, 
         'strokeWidth':1.2, 
         'strokeColor':'#65615a', 
         'onComplete' : function(){ 

          } 
        }) 

       $('#drawing2').lazylinepainter({ 
       'svgData' : dr2, 
       'strokeWidth':1.2, 
       'strokeColor':'#65615a', 
       'onComplete' : function(){ 

         } 
       }) 

       $('#drawing3').lazylinepainter({ 
       'svgData' : dr3, 
       'strokeWidth':1.2, 
       'strokeColor':'#65615a', 
       'onComplete' : function(){ 

         } 
       }) 

       $('#drawing4').lazylinepainter({ 
       'svgData' : dr4, 
       'strokeWidth':1.2, 
       'strokeColor':'#65615a', 
       'onComplete' : function(){ 

         } 
       }) 

       $('#drawing5').lazylinepainter({ 
       'svgData' : dr5, 
       'strokeWidth':1.2, 
       'strokeColor':'#65615a', 
       'onComplete' : function(){ 

         } 
       }) 

       // Paint your Lazy Line, that easy! 

      }) 




     })(jQuery);

代碼的第二部分：

var eventsFiredDr1 = 0; 

var drawing1 = function() { 
    if (eventsFiredDr1 == 0) { 

      $('#drawing1').lazylinepainter('paint'); 

     eventsFiredDr1++; // <-- now equals 1, won't fire again until reload 
     } 
    } 

var eventsFiredDr2 = 0; 

var drawing2 = function() { 
    if (eventsFiredDr2 == 0) { 

      $('#drawing2').lazylinepainter('paint'); 

     eventsFiredDr2++; // <-- now equals 1, won't fire again until reload 
     } 
    } 

var eventsFiredDr3 = 0; 

var drawing3 = function() { 
    if (eventsFiredDr3 == 0) { 

      $('#drawing3').lazylinepainter('paint'); 

     eventsFiredDr3++; // <-- now equals 1, won't fire again until reload 
     } 
    } 


var eventsFiredDr4 = 0; 

var drawing4 = function() { 
    if (eventsFiredDr4 == 0) { 

     $('#drawing4').lazylinepainter('paint'); 

     eventsFiredDr4++; // <-- now equals 1, won't fire again until reload 

     } 
    } 

var drawing5 = function() { 
    if (eventsFiredDr5 == 0) { 

     $('#drawing5').lazylinepainter('paint'); 

     eventsFiredDr5++; // <-- now equals 1, won't fire again until reload 

     } 
    } 

$(window).resize(function() { 
    if ($(window).width() < 820) { 

    $("svg").hide() 
    $(".fallback").show() 
    $("#drawing2").css("height", "auto") 
} 
}); 

if ($(window).width() > 820) { 

$(".fallback").hide() 

$(window).scrollStopped(function(){ 
     if ($("#drawing1").is(":within-viewport")) {   
        drawing1() 
        } 

     if ($("#drawing2").is(":within-viewport")) {  
      drawing2() 
        } 

     if ($("#drawing3").is(":within-viewport")) {  
      drawing3() 
        } 

     if ($("#drawing4").is(":within-viewport")) {  
      drawing4() 
        } 

     if ($("#drawing5").is(":within-viewport")) {  
      drawing5() 
        } 

});

（我知道我應該把DOM元素的變量，但我計劃在做代碼時重構代碼。）

我的第一個猜測是創建一個數組，但..不知道如何在我的代碼中使用它。（我是一個初學者）

來源

2013-06-05 Naemy

我想說這是更適合http://codereview.stackexchange.com/ –

選擇器只是字符串，你可以連接值'$（「＃drawing」+ i）' – Jasen

@ClaudioRedi不知道關於這個存在。謝謝！ – Naemy

對於第一部分，你可以用一個函數簡化它。

function addPainter(selector, svgData){ 
    $(selector).lazylinepainter({ 
         'svgData' : svgData, 
         'strokeWidth':1.2, 
         'strokeColor':'#65615a', 
         'onComplete' : function(){ 

          } 
        }) 
} 
$(document).ready(function(){ 

       // Setup your Lazy Line element. 
       // see README file for more settings 
       addPainter('#drawing1', dr1); 
       addPainter('#drawing2', dr2); 
       addPainter('#drawing3', dr3); 
       addPainter('#drawing4', dr4); 
       addPainter('#drawing5', dr5); 

       // Paint your Lazy Line, that easy! 

      }) 




     })(jQuery);

來源

2013-06-05 20:57:33 Smeegs

很酷，謝謝！只是一個建議：我不能用for循環來進一步重構這個嗎？ – Naemy

你可以做一個for循環，但是你會遇到一個switch語句的問題，以確定哪個變量被髮送給函數。這很好。它不會增加任何開銷，並且它會對函數調用進行任何更新，因爲它們只是一個調用。如果你願意，我可以把它放在我的答案中。 – Smeegs

我會先儲存您的DR1，DR2，等等......在陣列中。

然後，你可以做這樣的事情：

$(document).ready(function(){ 
    $('*[id^="#drawing"]').each(function(i, el) { 
    $(el).lazylinepainter({ 
     'svgData' : svgarray[$(this).attr('data').replace('#drawing', '')], 
     'strokeWidth':1.2, 
     'strokeColor':'#65615a', 
     'onComplete' : function(){ 
     } 
    }); 
    }); 
})();

我無法測試，所以也許適應它一點點你的需要，但主要的邏輯是在這裏。

來源

2013-06-05 21:25:28 Antoine

重構代碼的提示：非常重複的代碼

回答

相關問題