アニメーション雲と飛行機

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キーワードの使用状況は、オールラウンドビット手抜きのようです。