选择相似的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，我的任务是通过自动更改某些横幅的样式来帮助内容负责人，因此他只需在 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"
});