Question

我有这个非常简单的问题：我的代码太重复了。它确实有效，但我相信它可能会更加干净，但我不确切知道从哪里开始。

我想学会更好地工作，我真的很想有人来帮助我。

这是我的代码的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元素放在变量中，但是我计划在重构代码时这样做。）

我的第一个猜测是创建一个数组但是......不知道如何在我的代码中使用它。（我是一个很大的初学者）

Answer 1

对于第一部分，您可以使用函数简化它。

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

Answer 2

我会先将你的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(){
        }
     });
  });
})();

我无法测试它，所以可能会根据您的需要调整它，但主要的逻辑就在这里。

重构代码的提示：非常重复的代码

2 个答案: