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，它确实看起来凌乱而且冗长。有人试图用CoffeeScript清理javascript语法，但它并没有像一些人所希望的那样在主流开发中流行起来（包括我自己）。

此外，尽可能缩短内容并不总是符合您和他人的最佳利益。您最终可能会使代码的可读性降低很多，因此当您在一年后更改代码时，可能会减少维护。

话虽这么说，你可以通过将一些逻辑拆分成单独的函数来使代码更清晰，更具可读性。匿名函数很好（或多或少标准），但你可以将它们分解为命名函数。

使javascript / jquery代码更短？

2 个答案: