javascript - 给通用 slider js添加条件

Question

我网站上的两个页面上有相同的 slider ，为此使用了一个通用的 js 文件

 // Slider
 const slider = document.getElementById('generalSlider');
 const sliderRow = document.getElementById('generalSliderRow');
 const slides = document.querySelectorAll('.general');
 const INTERVAL = 6000;
 let timer = null;
 
 initSlider(slider, sliderRow, slides);
 
 function initSlider(slider, sliderRow, slides) {
     const slidesLength = slides.length;
 
     let allowShift = true;
     const CLONES_COUNT = 1;
     let slideWidth = slider.offsetWidth;
     const firstSlide = slides[0];
 
     let currentOffset = -slideWidth * CLONES_COUNT;
     let currentIndex = 1;
 
     slides.forEach(slide => {
         slide.style.width = slideWidth + 'px';
     });
 
     const appendSlides = [];
     const prependSlides = [];
 
     for (let i = 1; i <= CLONES_COUNT; i++) {
         prependSlides.push(slides[slidesLength - i].cloneNode(true));
         appendSlides.push(slides[i - 1].cloneNode(true));
     }
 
     prependSlides.reverse().forEach(slide => {
         sliderRow.insertBefore(slide, firstSlide);
     });
 
     appendSlides.forEach(slide => {
         sliderRow.appendChild(slide);
     });
 
     sliderRow.style.width = (slideWidth * (slidesLength + CLONES_COUNT * 2)) + 'px';
     sliderRow.style.transform = `translateX(${currentOffset}px)`;
 
     document.querySelector(`.general:nth-child(${currentIndex + CLONES_COUNT})`).classList.add('active');
     document.getElementById('navText').innerHTML = `${currentIndex} of ${slidesLength}`;
 
     const prevArrow = document.getElementById('prevArrow');
     const nextArrow = document.getElementById('nextArrow');
 
     prevArrow.addEventListener('click', () => {
         shiftSlide(-1);
         stopAutoplay();
     });
 
     nextArrow.addEventListener('click', () => {
         shiftSlide(1);
         stopAutoplay();
     });
 
     sliderRow.addEventListener('transitionend', checkIndex);
     sliderRow.addEventListener('click', stopAutoplay);
 
     function shiftSlide(dir, action = null) {
         sliderRow.classList.add('shifting');
 
         if (action) {
             currentOffset = posInitial;
         }
 
         if (allowShift) {
             if (dir === 1) {
                 currentOffset -= slideWidth;
                 sliderRow.style.transform = `translateX(${currentOffset}px)`;
                 currentIndex++;
             } else if (dir === -1) {
                 currentOffset += slideWidth;
                 sliderRow.style.transform = `translateX(${currentOffset}px)`;
                 currentIndex--;
             }
 
             document.querySelector('.general.active').classList.remove('active');
             document.querySelector(`.general:nth-child(${currentIndex + CLONES_COUNT})`).classList.add('active');
         }
 
         allowShift = false;
     }
 
     function checkIndex (){
         sliderRow.classList.remove('shifting');
 
         if (currentIndex === 0) {
             currentOffset = (-slideWidth * CLONES_COUNT) + (-slideWidth * (slidesLength - 1));
             sliderRow.style.transform = `translateX(${currentOffset}px)`;
             currentIndex = slidesLength;
         }
 
         if (currentIndex > slidesLength) {
             currentOffset = -slideWidth * CLONES_COUNT;
             sliderRow.style.transform = `translateX(${currentOffset}px)`;
             currentIndex = 1;
         }
 
         document.getElementById('navText').innerHTML = `${currentIndex} of ${slidesLength}`;
         document.querySelector('.general.active').classList.remove('active');
         document.querySelector(`.general:nth-child(${currentIndex + CLONES_COUNT})`).classList.add('active');
 
         allowShift = true;
     }
 
     let posX1 = 0;
     let posX2 = 0;
     let posInitial;
     let posFinal;
     const threshold = 100;
 
     // sliderRow.onmousedown = dragStart;
     // sliderRow.addEventListener('touchstart', dragStart);
     // sliderRow.addEventListener('touchend', dragEnd);
     // sliderRow.addEventListener('touchmove', dragAction);
 
     function dragStart (e) {
         e = e || window.event;
         e.preventDefault();
         if (!allowShift) {
             return;
         }
         posInitial = currentOffset;
 
         if (e.type == 'touchstart') {
             posX1 = e.touches[0].clientX;
         } else {
             posX1 = e.clientX;
             document.onmouseup = dragEnd;
             document.onmousemove = dragAction;
         }
     }
 
     function dragAction (e) {
         e = e || window.event;
 
         if (e.type == 'touchmove') {
             posX2 = posX1 - e.touches[0].clientX;
             posX1 = e.touches[0].clientX;
         } else {
             posX2 = posX1 - e.clientX;
             posX1 = e.clientX;
         }
         currentOffset = currentOffset - posX2;
         sliderRow.style.transform = `translateX(${currentOffset}px)`;
     }
 
     function dragEnd (e) {
         posFinal = currentOffset;
         if (posFinal - posInitial < -threshold) {
             shiftSlide(1, 'drag');
         } else if (posFinal - posInitial > threshold) {
             shiftSlide(-1, 'drag');
         } else {
             currentOffset = posInitial;
             sliderRow.style.transform = `translateX(${currentOffset}px)`;
         }
 
         document.onmouseup = null;
         document.onmousemove = null;
     }
 
     window.addEventListener('resize', () => {
         resizeSlider();
     })
 
     function resizeSlider() {
         const newSlideWidth = slider.offsetWidth;
 
         if (newSlideWidth === slideWidth) return;
 
         slideWidth = newSlideWidth;
 
         document.querySelectorAll('.general').forEach(slide => {
             slide.style.width = slideWidth + 'px';
         });
 
         currentOffset = (-slideWidth * CLONES_COUNT) + (-slideWidth * (currentIndex - 1));
 
         sliderRow.style.width = (slideWidth * (slidesLength + CLONES_COUNT * 2)) + 'px';
         sliderRow.style.transform = `translateX(${currentOffset}px)`;
     }
 
     function startAutoplay() {
         timer = setInterval(() => {
             shiftSlide(1);
         }, INTERVAL)
     }
 
     function stopAutoplay() {
         clearInterval(timer);
         timer = null;
     }
 
     startAutoplay();
 }

但现在在其中一个页面上我需要稍微更改 js 文件，但实际上是几行代码

我需要添加这个

let CLONES_COUNT;

if (slidesLength < 2) {
    CLONES_COUNT = 0;
} else {
    CLONES_COUNT = 1;
}

和

if (slidesLength > 1) {
    startAutoplay();
}

是否可以在特定页面的js文件中使用特定代码段来设置一些条件？以免在变化很小的地方制作完全相同的文件

有点像

if (RouteName() === 'home') {
const CLONES_COUNT = 1;
}

if (RouteName() === 'blog'){
let CLONES_COUNT;

if (slidesLength < 2) {
    CLONES_COUNT = 0;
} else {
    CLONES_COUNT = 1;
}
}

---

js

function initSlider(slider, sliderRow, slides, CLONES_COUNT, doAutoPlay) {
. . .
}

Blade .php

@section('scripts')
<script src="/js/slider.js"></script>
<script defer>$( document ).ready(function() {initSlider(slider, sliderRow, slides, (slides.length < 2) ? 0 : 1, slides.length > 1)})</script>
@endsection

Answer 1

您可以向您的 initSlider 函数添加一个参数，并从您的 common.js 中删除对它的调用

function initSlider(slider, sliderRow, slides, CLONES_COUNT) {
  // ...
}

然后在家里使用 initSlider(slider, sliderRow, slides, 1) 或在博客上使用:

const CLONES_COUNT = (slidesLength < 2) ? 0 : 1;
initSlider(slider, sliderRow, slides, CLONES_COUNT);

这也提供了将来在不同页面上进行不同配置的选项。