javascript/jqueryコードを短縮しますか？

Question

まあ、私はjQueryとjavascriptで新しくて、イメージスライダーのための 'some'コードを書いていますが、それは膨大です。私はそれがもっと短くてもよいと確信していますが、私はどのように分かっていません。私はそれから学ぶことができるようにそれを行う必要がある方法を私に見せてもらえますか？事前に感謝：D

私は怠け者見たくないPS、私は本当にここではJavascriptをとjQueryで

を良く取得したいが、私のコード

jQuery(document).ready(function(){ 

//Variables for image slider 
var imgWrapper = $('.carousel-wrapper'), 
    img = $('.carousel-box'), 
    imgWidth = $('.carousel-box').width(), 
    imgLength = $('.carousel-box').length, // 4 
    currentMargin = imgWrapper.css('margin-left').replace('px',''), //0px 
    responsiveLength = 3, 
    maxMargin = -((imgLength - responsiveLength) * imgWidth), 
    minMargin = 0; //0px 

$(window).resize(function(){ 
    if ($(window).width() <= 1080) { 
     responsiveLength = 2; 
     maxMargin = -((imgLength - responsiveLength) * imgWidth); 
    } else if ($(window).width() <= 700) { 
     responsiveLength = 1; 
     maxMargin = -((imgLength - responsiveLength) * imgWidth); 
    } else { 
     responsiveLength = 3; 
     maxMargin = -((imgLength - responsiveLength) * imgWidth);  
    } 
}); 

//Transition animation on click 
$('.portbutton').click(function(){ 

    //Get the direction 
    var dir = $(this).data('dir'); 

    if (dir === 'next' && currentMargin != maxMargin) { 
     currentMargin -= imgWidth; 
     imgWrapper.animate({marginLeft: currentMargin},300); 
    } else if (dir === 'next' && currentMargin === maxMargin){ 
     currentMargin = minMargin; 
     imgWrapper.animate({marginLeft: currentMargin},300); 
    } else if (dir === 'prev' && currentMargin != minMargin){ 
     currentMargin += imgWidth; 
     imgWrapper.animate({marginLeft: currentMargin},300); 
    } else { 
     currentMargin = maxMargin; 
     imgWrapper.animate({marginLeft: currentMargin},300); 
    } 

}); 

}です）。

Answer 1

あなたがのためにいくつかの機能を使用することができます。それは、必ず使用する前に設定するだけで整数の場合は、ちょうどあなたが持っているだろう、代わりに整数をパント、

function animate(currentMargin){ 
imgWrapper.animate({marginLeft: currentMargin},300); 
} 

function getMaxMargin(imgLength,responsiveLength,imgWidth){ 
maxMargin = -((imgLength - responsiveLength) * imgWidth); 
return maxMargin 
} 

そしておそらくすべての時間値responsiveLengthを作成避けますより多くのメモリ空間。

Answer 2

あなたのコードはそれほど悪くありません。 Javascriptについて知っておくべきこと、特にjqueryを使うことは、面倒で冗長になります。 CoffeeScriptでjavascriptの構文を整理しようとする試みがありましたが、主流の開発では（自分自身も含めて）期待していたほどのものはありませんでした。

また、可能な限り簡略化することは、あなたと他の人にとって最も興味深いものではありません。 1年後にコードを変更して戻ってくると、コードの読みやすさが低下し、保守性が低下する可能性があります。

言われていることは、あなたのロジックのいくつかを別々の機能に分割することで、コードをよりきれいにすることができます。匿名関数は素晴らしいです（多かれ少なかれ）が、おそらくそれらを名前付き関数に分解することができます。