Animierte Wolken und Flugzeug

Question

Ich habe eine einfache apps mit viel Javascript-Code erstellt, ich benutze auch jQuery und der Code sieht so dreckig. Jetzt möchte ich versuchen, meinen Code auf Objektorientiert umzustrukturieren. Was ich verwirrt habe, ist, wo man eine Eigenschaft aufruft, wo man eine Benutzeraktion auf ein Element setzt, wo man eine dom-Elementvariable setzt usw. Es ist ein bisschen von meinem Code vor und nach der Neustrukturierung.

Bevor:

var $cloud = $(".js-cloud"); 
var $plane = $(".js-plane"); 

function randomPosition(min, max) { 
    return Math.random() * (max - min) + min; 
} 

$cloud.each(function(){ 
    var leftPosition = randomPosition(1,100) + "%"; 
    $(this).css("left",leftPosition) 

    var speed = $(this).data("speed"); 
    $(this).velocity({ 
     left : "-200px" 
    }, { 
     duration : speed, 
     easing : "linear", 
     loop : true 
    }) 
}) 


function loopPlane(){ 
    $plane.velocity({ 
     left : "-300px" 
    }, { 
     duration : 7000, 
     easing : "linear", 
     complete : function(){ 
      $(this).css({ 
       "right" : "-300px", 
       "left" : "auto" 
      }) 
      loopPlane() 
     }, 
     delay : 15000 
    }) 
} 
loopPlane() 

Nach:

//Clouds and plane element 
var $cloud = $(".js-cloud"); 
var $plane = $(".js-plane"); 

/* Module */ 
var background = { 
    init : function(){ 
     this.loopClouds(); 
     this.loopPlane(); 
    }, 

    randomPosition : function(min,max){ 
     return Math.random() * (max - min) + min; 
    }, 

    loopPlane : function(){ 
     var obj = this; 
     //Animate it 
     $plane.velocity({ 
      left : "-300px" 
     }, { 
      duration : 7000, 
      easing : "linear", 
      complete : function(){ 
       $plane.css({ 
        "right" : "-300px", 
        "left" : "auto" 
       }) 
       obj.loopPlane() 
      }, 
      delay : 1000 
     }) 
    }, 

    loopClouds : function(){ 
     var obj = this; 
     $cloud.each(function(){ 
      var leftPosition = obj.randomPosition(1,100) + "%"; 
      $(this).css("left",leftPosition) 

      var speed = $(this).data("speed"); 
      //Animate it 
      $(this).velocity({ 
       left : "-200px" 
      }, { 
       duration : speed, 
       easing : "linear", 
       loop : true 
      }) 
     }) 
    } 
} 

Ist das mein Code sieht Reiniger und lesbar? oder gibt es eine bessere Version meines Umstrukturierungscodes?

Answer 1

Wenn Sie $var.each verwenden, sollten Sie nicht den ersten Parameter des Callback mit seinem Element zielen, anstatt this der Verwendung des $var Array Ziel. Wenn es so etwas wie ein .forEach (aber mit einem Array fn.init) ist, dann wird das Element durch den Rückruf in den Kontext der Schleife übergeben.

Sie tun dies:

function loopClouds() { 
    var obj = this; 
    $cloud.each(function(){ 
     var leftPosition = obj.randomPosition(1,100) + "%"; 
     $(this).css("left",leftPosition) 

     var speed = $(this).data("speed"); 
     //Animate it 
     $(this).velocity({ 
      left : "-200px" 
     }, { 
      duration : speed, 
      easing : "linear", 
      loop : true 
     }) 
    }); 
} 

Sollten Sie dies nicht tun?

function loopClouds() { 
    $cloud.each(function (cloud) { 
     cloud.css("left", randomPosition(1, 100)); 
     cloud.velocity({left: "-200px"}, { 
      duration: cloud.data("speed"), 
      easing: "linear", 
      loop: true 
     }); 
    }); 
} 

Dies ist nur ein Beispiel, aber Ihre Nutzung der this Schlüsselwort scheint ein wenig schäbige allseitige zu sein.