选择相似的 DOM 元素时如何避免重复代码？

Question

目前我有：

  const mainBannerInfo = document.querySelector('.bigfullbanner').querySelector('.banner-row').querySelector('.info-col');
  const title__MainBanner = mainBannerInfo.querySelector('h4');
  const subtitle__MainBanner = mainBannerInfo.querySelector('p');
  const buttonCTA__MainBanner = mainBannerInfo.getElementsByClassName('button-big-banner');

  let watchMedia = window.matchMedia("( max-width:  1023px )")

  function whiteToBlackInfo__MainBanner() {
    //Changing TITLE text styles
    title__MainBanner.classList.remove('text-white');
    title__MainBanner.classList.add('text-black');
    //Changing SUBTITLE styles
    subtitle__MainBanner.classList.remove('text-white');
    subtitle__MainBanner.classList.add('text-black');
    //Changing CTA Buttons styles
    for(let i = 0; i < buttonCTA__MainBanner.length; i++) {
      buttonCTA__MainBanner[i].classList.remove('text-black');
      buttonCTA__MainBanner[i].classList.add('text-white');
      buttonCTA__MainBanner[i].classList.remove('bg-white');
      buttonCTA__MainBanner[i].classList.add('bg-black');
    }
  }

  function blackToWhiteInfo__MainBanner() {
      //Changing TITLE text styles
      title__MainBanner.classList.remove('text-black');
      title__MainBanner.classList.add('text-white');
      //Changing SUBTITLE styles
      subtitle__MainBanner.classList.remove('text-black');
      subtitle__MainBanner.classList.add('text-white');
      //Changing CTA Buttons styles
      for(let i = 0; i < buttonCTA__MainBanner.length; i++) {
        buttonCTA__MainBanner[i].classList.remove('text-white');
        buttonCTA__MainBanner[i].classList.add('text-black');
        buttonCTA__MainBanner[i].classList.remove('bg-black');
        buttonCTA__MainBanner[i].classList.add('bg-white');
      }
  }

  if(
      mainBannerInfo.classList.contains('bottomright') ||
      mainBannerInfo.classList.contains('bottomleft') ||
      mainBannerInfo.classList.contains('topright') ||
      mainBannerInfo.classList.contains('topleft') ||
      mainBannerInfo.classList.contains('centerInfo') &&
      !mainBannerInfo.classList.contains('keep-color')) {
      
        blackToWhiteInfo__MainBanner();

      if(
        mainBannerInfo.classList.contains('outsideDesktop') &&
        watchMedia.matches == false
      ) {
        whiteToBlackInfo__MainBanner();
      } else if(
        mainBannerInfo.classList.contains('outsideMobile') &&
        watchMedia.matches == true 
      ) {
        whiteToBlackInfo__MainBanner();
      }
  } 
  // -------------------------------------------------

我目前正在开发 CMS，我的任务是通过自动更改某些横幅的样式来帮助内容负责人，这样他只需要 write/remove 一些类 html 文件。所以我创建了 DOM 选择器并创建了一些函数来实现这一点。问题是我有另一个几乎相同的横幅：

  const novedadBannerInfo = document.querySelector('.smallfullbanner').querySelector('.banner-row').querySelector('.info-col');
  const title__novedadBanner = novedadBannerInfo.querySelector('h4');
  const subtitle__novedadBanner = novedadBannerInfo.querySelector('p');
  const buttonCTA__novedadBanner = novedadBannerInfo.getElementsByClassName('button-big-banner');

  function whiteToBlackInfo__novedadBanner() {
    //Changing TITLE text styles
    title__novedadBanner.classList.remove('text-white');
    title__novedadBanner.classList.add('text-black');
    //Changing SUBTITLE styles
    subtitle__novedadBanner.classList.remove('text-white');
    subtitle__novedadBanner.classList.add('text-black');
    //Changing CTA Buttons styles
    for(let i = 0; i < buttonCTA__novedadBanner.length; i++) {
      buttonCTA__novedadBanner[i].classList.remove('text-black');
      buttonCTA__novedadBanner[i].classList.add('text-white');
      buttonCTA__novedadBanner[i].classList.remove('bg-white');
      buttonCTA__novedadBanner[i].classList.add('bg-black');
    }
  }

  function blackToWhiteInfo__novedadBanner() {
      //Changing TITLE text styles
      title__novedadBanner.classList.remove('text-black');
      title__novedadBanner.classList.add('text-white');
      //Changing SUBTITLE styles
      subtitle__novedadBanner.classList.remove('text-black');
      subtitle__novedadBanner.classList.add('text-white');
      //Changing CTA Buttons styles
      for(let i = 0; i < buttonCTA__novedadBanner.length; i++) {
        buttonCTA__novedadBanner[i].classList.remove('text-white');
        buttonCTA__novedadBanner[i].classList.add('text-black');
        buttonCTA__novedadBanner[i].classList.remove('bg-black');
        buttonCTA__novedadBanner[i].classList.add('bg-white');
      }
  }

  if(
      novedadBannerInfo.classList.contains('bottomright') ||
      novedadBannerInfo.classList.contains('bottomleft') ||
      novedadBannerInfo.classList.contains('topright') ||
      novedadBannerInfo.classList.contains('topleft') ||
      novedadBannerInfo.classList.contains('centerInfo') &&
      !mainBannerInfo.classList.contains('keep-color')) {
      
        blackToWhiteInfo__novedadBanner();

      if(
        novedadBannerInfo.classList.contains('outsideDesktop') &&
        watchMedia.matches == false
      ) {
        whiteToBlackInfo__novedadBanner();
      } else if(
        novedadBannerInfo.classList.contains('outsideMobile') &&
        watchMedia.matches == true 
      ) {
        whiteToBlackInfo__novedadBanner();
      }
  } 
  // -------------------------------------------------

如您所见，它实际上是相同的，但存储选择器的变量必须更改，我必须重新创建所有这些函数。

有什么办法可以缩小这段代码吗？

Answer 1

您可以创建一个以两种颜色作为参数的辅助函数 mainBanner(color1, color2)。在此函数中，您可以使用 color1 和 color2 动态构建类（如 text-white、text-black 等）。

看这段代码：

function mainBanner(color1, color2) {
    //Changing TITLE text styles
    title__MainBanner.classList.remove('text-' + color1);
    title__MainBanner.classList.add('text-' + color2);
    //Changing SUBTITLE styles
    subtitle__MainBanner.classList.remove('text-' + color1);
    subtitle__MainBanner.classList.add('text-' + color2);
    //Changing CTA Buttons styles
    for(let i = 0; i < buttonCTA__MainBanner.length; i++) {
        buttonCTA__MainBanner[i].classList.remove('text-' + color2);
        buttonCTA__MainBanner[i].classList.add('text-' + color1);
        buttonCTA__MainBanner[i].classList.remove('bg-' + color1);
        buttonCTA__MainBanner[i].classList.add('bg-' + color2);
    }
}

function blackToWhiteInfo__MainBanner() {
    mainBanner('black', 'white');
}

function whiteToBlackInfo__MainBanner() {
    mainBanner('white', 'black');
}

如果你有比这两种颜色更多的选项，你可以将一个options对象传递给mainBanner(options)函数并像这样实现它：

function mainBanner(options) {
    var color1 = options.color1;
    var color2 = options.color2;
    var textClsPrefix = options.textClsPrefix;
    var someOtherProperty = options.someOtherProperty;

    ...
}

// sample call 1
mainBanner({
    color1: "white", 
    color2: "black", 
    textClsPrefix: "text-", 
    someOtherProperty: "some-value"
});

// sample call 2
mainBanner({
    color1: "black", 
    color2: "white", 
    textClsPrefix: "text-light-", 
    someOtherProperty: "some-value-2"
});

选择相似的 DOM 元素时如何避免重复代码？

How to avoid repeating code when selecting similar DOM elements?

javascript

css

oop

dom