Как сократить скрипт и убрать дублирование кода?

Question

Подскажите пожалуйста, как сократить эту часть кода?

if (document.documentElement.clientWidth > 1080) {
    // если ширина экрана больше 1080 выводить 4 товара
    $(window).load(function () {
        $(".center").slick({
            dots: false,
            autoplay: true,
            infinite: true,
            slidesToShow: 4,
            slidesToScroll: 1,
            autoplaySpeed: 2000,
        });
    });
} else {
    // если ширина экрана меньше 1080 выводить 2 товара
    $(window).load(function () {
        $(".center").slick({
            dots: false,
            autoplay: true,
            infinite: true,
            slidesToShow: 2,
            slidesToScroll: 1,
            autoplaySpeed: 2000,
        });
    });
}

Answer 1

Убрать дублирование кода можно, допустим так:

const slickData = {
    dots: false,
    autoplay: true,
    infinite: true,
    slidesToShow: 2,
    slidesToScroll: 1,
    autoplaySpeed: 2000,
}

if (document.documentElement.clientWidth > 1080) slickData.slidesToShow = 4;
$(window).load(function () {
    $(".center").slick(slickData);
});

Answer 2

То, что ты просишь - так:

$(window).load(function () {
    $(".center").slick({
        dots: false,
        autoplay: true,
        infinite: true,
        slidesToShow: document.documentElement.clientWidth > 1080 ? 4 : 2,
        slidesToScroll: 1,
        autoplaySpeed: 2000,
    });
});

Но вообще-то это всё равно неправильно, т. к. надо менять лейаут при изменении ширины окна.

БЛОГ НА HUSL

Как сократить скрипт и убрать дублирование кода?

Ответы (2 шт):