Как я могу минимизировать использование строк кода (для каждой) - PullRequest
Новая
       13

Как я могу минимизировать использование строк кода (для каждой)

0 голосов
/ 12 ноября 2018

Swiper One 

var swiperCurrent;

var swiper = new Swiper('.swiper-container-1', {
    init: false,
    pagination: '.swiper-pagination-1',
    nextButton: '.swiper-button-next-1',
    prevButton: '.swiper-button-prev-1',
    slidesPerView: 3,
    centeredSlides: true,
    paginationClickable: true,
    initialSlide: 2,
    spaceBetween: 22,
    breakpoints: {
        992: {
            slidesPerView: 1,
            spaceBetween: 10
        }
    },
    runCallbacksOnInit:true
});

function showSliderContent2(idx) {
    $('._ooredoo_banner_content_1> div').hide(0);
    $('._ooredoo_banner_content_1> div:eq('+ idx +')').fadeIn(200)
}

swiper.on('init', function (el) {
    showSliderContent(el.activeIndex);
});

swiper.on('transitionEnd', function (el) {
    if(swiperCurrent !== el.activeIndex){
        showSliderContent(el.activeIndex);
        swiperCurrent = el.activeIndex;
    }
});

swiper.init();

Swiper Two 

var swiperCurrent2;

var swiper = new Swiper('.swiper-container-2, {
    init: false,
    pagination: '.swiper-pagination-2',
    nextButton: '.swiper-button-next-2',
    prevButton: '.swiper-button-prev-2',
    slidesPerView: 3,
    centeredSlides: true,
    paginationClickable: true,
    initialSlide: 2,
    spaceBetween: 22,
    breakpoints: {
        992: {
            slidesPerView: 1,
            spaceBetween: 10
        }
    },
    runCallbacksOnInit:true
});

function showSliderContent2(idx) {
    $('._ooredoo_banner_content_2> div').hide(0);
    $('._ooredoo_banner_content_2> div:eq('+ idx +')').fadeIn(200)
}

swiper.on('init', function (el) {
    showSliderContent2(el.activeIndex);
});

swiper.on('transitionEnd', function (el) {
    if(swiperCurrent2 !== el.activeIndex){
        showSliderContent2(el.activeIndex);
        swiperCurrent2 = el.activeIndex;
    }
});

swiper.init();

Swiper Three 

var swiperCurrent3;

var swiper = new Swiper('.swiper-container-3’, {
    init: false,
    pagination: '.swiper-pagination-3',
    nextButton: '.swiper-button-next-3',
    prevButton: '.swiper-button-prev-3',
    slidesPerView: 3,
    centeredSlides: true,
    paginationClickable: true,
    initialSlide: 2,
    spaceBetween: 22,
    breakpoints: {
        992: {
            slidesPerView: 1,
            spaceBetween: 10
        }
    },
    runCallbacksOnInit:true
});

function showSliderContent3(idx) {
    $('._ooredoo_banner_content_3> div').hide(0);
    $('._ooredoo_banner_content_3> div:eq('+ idx +')').fadeIn(200)
}

swiper.on('init', function (el) {
    showSliderContent3(el.activeIndex);
});

swiper.on('transitionEnd', function (el) {
    if(swiperCurrent3 !== el.activeIndex){
        showSliderContent3(el.activeIndex);
        swiperCurrent3 = el.activeIndex;
    }
});

swiper.init();

1 Ответ

0 голосов
/ 12 ноября 2018

Может помочь что-то вроде следующего (непроверенного) кода: все, что я сделал, это разложил общий код в многократно используемую функцию и использовал строки шаблона для заполнения недостающих частей, затем map, который работает над 1, 2 и 3 частичные идентификаторы.Это означает, что нам больше не нужны суффиксы 2 и 3 для некоторых переменных;они доступны только внутри замыканий, сгенерированных обратным вызовом map.

В этом, вероятно, есть ошибки, либо повторное использование чего-то, чего я не должен, либо наоборот: создание чего-то динамического, которое не должно быть,В первом случае, если вы можете продолжать использовать id, чтобы отличить его, отлично.В противном случае вам может потребоваться еще одна или несколько дополнительных переменных, а оператор map должен будет стать немного более сложным. 

const makeSwiper = (id) => {
    var swiperCurrent;

    var swiper = new Swiper('.swiper-container-2', {
        init: false,
        pagination: `.swiper-pagination-${id}`,
        nextButton: `.swiper-button-next-${id}`,
        prevButton: `.swiper-button-prev-${id}`,
        slidesPerView: 3,
        centeredSlides: true,
        paginationClickable: true,
        initialSlide: 2,
        spaceBetween: 22,
        breakpoints: {
            992: {
                slidesPerView: 1,
                spaceBetween: 10
            }
        },
        runCallbacksOnInit:true
    });

    function showSliderContent(idx) {
        $(`._ooredoo_banner_content_${id}> div`).hide(0);
        $(`._ooredoo_banner_content_${id}> div:eq(${idx})`).fadeIn(200)
    }

    swiper.on('init', function (el) {
        showSliderContent(el.activeIndex);
    });

    swiper.on('transitionEnd', function (el) {
        if(swiperCurrent !== el.activeIndex){
            showSliderContent(el.activeIndex);
            swiperCurrent = el.activeIndex;
        }
    });

    return swiper
}

const swipers = [1, 2, 3].map(makeSwiper)
...