缩短javascript/jquery代码？

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

});

jQuery（文档）.ready（函数（）{
//图像滑块的变量
变量imgWrapper=$（'.carousel wrapper'），
img=$（“.carousel box”），
imgWidth=$（'.carousel-box'）.width（），
imgLength=$（'.carousel-box'）。长度，//4
currentMargin=imgWrapper.css（'margin-left'）。替换（'px'，''）//0px
响应长度=3，
最大裕度=-（（imgLength-响应长度）*imgWidth），
minMargin=0；//0px
$（窗口）。调整大小（函数（）{
如果（$（window）.width（），则可以使用以下函数：

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

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

并且可能避免始终创建值responsiveLength，如果它只是一个您在使用前总是设置的整数，那么只需将该整数转换为punt，您将拥有更多的内存空间。
您可以使用一些函数：

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

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

并且可能避免始终创建值responsiveLength，如果它只是一个您在使用前总是设置的整数，那么只需将该整数平底即可，您将拥有更多的内存空间。
您的代码并没有那么糟糕。关于javascript，需要了解一点，尤其是使用jquery，它确实会变得/看起来混乱和冗长。有一些尝试ts试图用CoffeeScript清理javascript语法，但它并没有像一些人希望的那样（包括我自己）在主流开发中流行起来

此外，尽可能地简化代码并不总是符合您和其他人的最佳利益。一年后，当您再次更改代码时，可能会使代码的可读性大大降低，从而降低可维护性

也就是说，通过将一些逻辑拆分为单独的函数，您可能会使代码更干净、更可读，但您也许可以将它们分解为命名函数。
您编写的代码并没有那么糟糕。关于javascript，尤其是使用jquery，它确实变得/看起来杂乱无章且冗长。有人试图用CoffeeScript清理javascript语法，但它在主流开发中没有像一些人那样流行佩德（包括我自己）

此外，尽可能地简化代码并不总是符合您和其他人的最佳利益。一年后，当您再次更改代码时，可能会使代码的可读性大大降低，从而降低可维护性

也就是说，通过将一些逻辑拆分为单独的函数，您可能会使代码更干净、更可读，但您也许可以将其分解为命名函数。
Shorter！==更好。如果您想改进代码，重构就是您想要的。Shorter！==更好。如果您想改进代码，重构就是您想要的。谢谢您的帮助：D我想这些函数会得到帮助的谢谢您的帮助：D我想那些函数s会派上用场的