Сделать код javascript/jquery короче?

Question

Ну, я вроде как новый с jQuery и javascript, и я написал «некоторый» код для слайдера изображения, но он огромен. Я убежден, что это может быть короче, но я не знаю, как это сделать. Может ли кто-нибудь показать мне, как это сделать, чтобы я мог учиться на этом? Заранее спасибо: 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, она становится/выглядит грязной и многословной. Были попытки очистить синтаксис javascript с помощью CoffeeScript, но он не попал в основной процесс развития, как некоторые надеялись (включая меня).

Кроме того, делать вещи как можно более сокращенно не всегда в интересах ваших и других. В конце концов, вы можете сделать свой код намного менее удобочитаемым и, следовательно, менее ремонтируемым, когда вы вернетесь, чтобы изменить код через год.

Это, как говорится, может сделать код более чистым и понятным, разделив часть вашей логики на отдельные функции. Анонимные функции приятные (и более или менее стандартные), но вы могли бы разбить их на именованные функции.