我如何通过实现DRY原则使这段代码变成一个可重用的函数呢？

Question

我正试图将我的代码应用在一个简单的function中，并带有参数，并且由于DRY原则使其可重用。正如您所看到的，我在我的两个AddEventListener函数中使用了相当相同的代码。下面是我希望在AddEventListener函数中可重用的代码：

 rightBtn.addEventListener("click", () => {
      activeSlide++;
      if (activeSlide > slides.length - 1) {
        activeSlide = 0;
      }
    });

    leftBtn.addEventListener("click", () => {
      activeSlide--;
      if (activeSlide < 0) {
        activeSlide = slides.length - 1;
      }
    });

Answer 1

您可以简单地创建一个函数，该函数传递一个值，通过该值您可以增加或减少幻灯片索引。然后更新幻灯片,如下面的代码段所示。

null

const slides = ["Apple", "Mango", "Banana"];
let currSlide = 2;

const leftBtn = document.querySelector("#leftBtn");
const rightBtn = document.querySelector("#rightBtn");
const content = document.querySelector("#content");

content.innerText = slides[currSlide];

const changeSlide = (delta) => {
  currSlide = (currSlide + delta + slides.length) % slides.length;
  content.innerText = slides[currSlide];
};

leftBtn.addEventListener("click", () => changeSlide(-1));
rightBtn.addEventListener("click", () => changeSlide(1));

<button id="leftBtn">Left</button>
<span id="content"></span>
<button id="rightBtn">Right</button>