动画云和平面

Question

我已经创建了一个简单的应用程序，有很多的Javascript代码，使用jQuery太并且代码看起来这么脏。所以现在，我想尝试将我的代码重构为面向对象。我所困惑就是调用一个属性，在那里把一个用户动作的元素，在那里把DOM元素变量等，这是一个有点我的代码之前和改制后。

前：

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

后：

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

那是我的代码看起来更干净和可读性？或者我的重组代码有更好的版本？

Answer 1

当您使用$var.each时，您是不是应该使用回调的第一个参数来定位元素，而不是使用this来定位$var阵列。如果它像一个.forEach任何东西（但有一个fn.init阵列），则该元素被通过回调传递到循环的情况下。

你这样做：

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

你不是应该这样做呢？

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

这只是一个例子，但你的this关键字的使用似乎是有点粗制滥造的全方位。