javascript - JS中如何减少函数内的重复代码

Question

我的轮播界面的每个函数都有这行代码:dots[(i+len-1)%len].className = dots[(i+len-1)%len].className.replace(" active", "")它在点元素的每次迭代中删除了先前的“active”类。如果我不在每个函数上添加此代码，则类“active”在每次迭代中都会传播多个，如下所示:<span class="dot active active active active" onclick="dotSlide(1)"></span>这是一个错误，在旋转木马滑动期间或当我按下下一个或上一个按钮时，事件点未通过其相应的索引与图像对齐。我怎样才能减少这些代码。

var slideIndex = 0;
loop();
var slides, dots;

function loop() {
  slides = document.getElementsByClassName("slides");
  dots = document.getElementsByClassName("dot");
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  var len = dots.length;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  for (var i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
    dots[(i + len - 1) % len].className = dots[(i + len - 1) % len].className.replace(" active", "")

    dots[(i + len - 2) % len].className = dots[(i + len - 2) % len].className.replace(" active", "");
    dots[(i + len - 3) % len].className = dots[(i + len - 3) % len].className.replace(" active", "")
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
  setTimeout(loop, 6000); // Change image every 6 seconds
}

function plusSlides(position) {
  var len = dots.length;
  slideIndex += position;
  if (slideIndex > slides.length) {
    slideIndex = 1
  } else if (slideIndex < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
    dots[(i + len - 1) % len].className = dots[(i + len - 1) % len].className.replace(" active", "");
    dots[(i + len - 2) % len].className = dots[(i + len - 2) % len].className.replace(" active", "")
    dots[(i + len - 3) % len].className = dots[(i + len - 3) % len].className.replace(" active", "")
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
  }
}

function dotSlide(index) {
  if (index > slides.length) {
    index = 1
  } else if (index < 1) {
    index = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  var len = dots.length;
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
    dots[(i + len - 1) % len].className = dots[(i + len - 1) % len].className.replace(" active", "");
    dots[(i + len - 2) % len].className = dots[(i + len - 2) % len].className.replace(" active", "")
    dots[(i + len - 3) % len].className = dots[(i + len - 3) % len].className.replace(" active", "")
    slides[index - 1].style.display = "block";
    dots[index - 1].className += " active";
  }
}

<div id="slide">
  <div class="slides-container" style="text-align:center">
    <div class="slides fadeOut"> <img src="images/pine_forest.jpg"> </div>
    <div class="slides fadeOut"> <img src="images/best-forest.jpg"> </div>
    <div class="slides fadeOut"> <img src="images/EarthBeauty221.jpg"> </div>
    <div class="slides fadeOut"> <img src="images/setwalls.ru-79192.jpg"> </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>
</div>
<div class="dots" style="text-align:center">
  <span class="dot" onclick="dotSlide(1)"></span>
  <span class="dot" onclick="dotSlide(2)"></span>
  <span class="dot" onclick="dotSlide(3)"></span>
  <span class="dot" onclick="dotSlide(4)"></span>
</div>

Answer 1

在这种情况下，通常的解决方案适用于实用函数和循环。一、实用函数:

// NOTE: We'll come back to this function, it has potential issues
function removeSubsequentClass(element, cls) {
  element.className = element.className.replace(" " + cls, "");
}

那么至少你有:

removeSubsequentClass(dots[(i+len-1)%len], "active");
removeSubsequentClass(dots[(i+len-2)%len], "active");
removeSubsequentClass(dots[(i+len-3)%len], "active");

它还有一个优点，就是封装该功能，稍后就会派上用场。

这已经是一个改进，但我们也可以对其进行循环:

for (let n = 1; n <= 3; ++n) {
    removeSubsequentClass(dots[(i+len-n)%len], "active");
}

<小时/>

关于removeSubsequentClass:它非常脆弱。它假设:

• 该类(class)不会是第一类(class)
• 该类不会是另一个类的子字符串(考虑:class="foo active-nifty-thing"，它将变成class="foo-nifty-thing" -- 哎呀!)

在任何现代浏览器上，您可以使用 classList (可以进行填充)。我们还可以从名称中删除限定条件:

// NOTE: We'll come back to this function, it has potential issues
function removeClass(element, cls) {
  element.classList.remove(cls);
}

如果您需要支持没有 classList 的过时浏览器并且不想进行 polyfill，那么:

function removeClass(element, cls) {
  element.className = (" " + element.className + " ")
    .replace(" " + cls + " ", "")
    .replace(/(?:^ +)|(?: +$)/g, "");
}

如果您想使用一个 replace 来完成此操作，并保证您的类不会包含任何由正则表达式特殊处理的字符，那么:

function removeClass(element, cls) {
  element.className = (" " + element.className + " ")
    .replace(new RegExp("(?:^ +)|(?: +$)|(?: " + cls + " )", "g"), "");
}

或使用 regular expression escape function如果类名对于上述内容可能不安全:

function removeClass(element, cls) {
  element.className = (" " + element.className + " ")
    .replace(new RegExp("(?:^ +)|(?: +$)|(?: " + theEscapeFunctionGoesHere(cls) + " )", "g"), "");
}