如何减小 javascript 测试代码的大小？

Question

能够在原始代码之外测试这些按钮。

我在这里将按钮代码移到了单独的小提琴中。 https://jsfiddle.net/2150m6tg/

我如何能够减小 javascript 的大小，以便只有按钮单击功能起作用？

这就是我想要在代码中做的所有事情。

我只想能够点击按钮。

如何做到这一点？

这些按钮在我提供的 sn-p 中是可点击的。

它们只是可褪色的按钮。

const manageCover = (function makeManageCover() {
  const config = {};

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function hideAll(elements) {
    elements.forEach(hide);
  }

  function resetBackground(backgroundSelector) {
    const allBackgrounds = document.querySelectorAll(backgroundSelector);

    function hideBackground(background) {
      background.classList.add("bg1");
    }
    allBackgrounds.forEach(hideBackground);
  }

  function resetButtons(buttonSelector) {
    const allButtons = document.querySelectorAll(buttonSelector);

    function hideButton(button) {
      button.classList.add("isOpen");
    }
    allButtons.forEach(hideButton);
  }

  function resetPage() {
    resetBackground("body");
    resetButtons(".outer");
    
  }

  function markAsPlayed(played) {
    played.classList.add("played");
  }

  function showCovers(playButton) {
    const cover = playButton.parentElement;
    cover.classList.add("active");
    show(cover);
  }

  function coverClickHandler(evt) {
    hideAll(config.containers);
    resetPage();
    markAsPlayed(evt.currentTarget);
    const cover = evt.currentTarget;
    showCovers(cover);
  }

  function addClickToButtons(playButtons) {
    playButtons.forEach(function playButtonHandler(playButton) {
      playButton.addEventListener("click", coverClickHandler);
    });
  }

  function addCoverHandler(coverSelector, handler) {
    const cover = document.querySelector(coverSelector);
    cover.addEventListener("click", handler);
  }

  function init(selectors) {
    config.containers = document.querySelectorAll(selectors.container);
    const playButtons = document.querySelectorAll(selectors.playButton);
    addClickToButtons(playButtons);
  }

  return {
    addCoverHandler,
    init
  };
}());

const manageUI = (function makeManageUI() {
  const body = document.body;

  function resetBackground(backgroundSelector) {
    const allBackgrounds = document.querySelectorAll(backgroundSelector);

    function showBackground(background) {
      background.classList.remove("bg1");
    }
    allBackgrounds.forEach(showBackground);
  }

  function resetCurtains(curtainSelector) {
    const allCurtains = document.querySelectorAll(curtainSelector);

    function showCurtain(curtain) {
      curtain.classList.remove("active");
    }
    allCurtains.forEach(showCurtain);
  }

  function showAllButtons(buttonSelector) {
    const allButtons = document.querySelectorAll(buttonSelector);

    function showButton(button) {
      button.classList.remove("hide");
    }
    allButtons.forEach(showButton);
  }

  function resetButtons(buttonSelector) {
    const allButtons = document.querySelectorAll(buttonSelector);

    function showButton(button) {
      button.classList.remove("isOpen");
    }
    allButtons.forEach(showButton);
  }

  function animationEndHandler(evt) {

    const animationName = evt.animationName;

    if (animationName === "fadeOutBody") {
      fadeReset();
    }
  }

  function fadeReset() {
    body.classList.remove("fadingOut");
    resetBackground("body");
    resetCurtains(".with-curtain");
    showAllButtons(".hide");
    resetButtons(".outer");
  }

  function resetPage() {
    body.classList.add("fadingOut");
  }

  function exitClickHandler() {
    resetPage();
  }

  function addClickToExit(exitButtons) {
    exitButtons.forEach(function addExitButtonHandler(exitButtons) {
      exitButtons.addEventListener("click", exitClickHandler);
    });
  }

  function addExitHandlers(callback) {
    const resetVideo = document.querySelectorAll(".exit");
    resetVideo.forEach(function resetVideoHandler(video) {
      video.addEventListener("click", callback);
    });
  }

  function init() {
    const exitButtons = document.querySelectorAll(".exit");
    addClickToExit(exitButtons);
    body.addEventListener("animationend", animationEndHandler);
  }

  return {
    addExitHandlers,
    init
  };
}());

const videoPlayer = (function makeVideoPlayer() {

  const tag = document.createElement("script");
  tag.src = "https://www.youtube.com/player_api";
  const firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  function onPlayerReady(event) {
    const player = event.target;
    player.setVolume(0);
  }

  function onPlayerStateChange(event) {
    const player = event.target;
    return player;
  }

  function addPlayer(video, playerOptions) {
    playerOptions.videoId = playerOptions.videoId || video.dataset.id;
    playerOptions.events = playerOptions.events || {};
    playerOptions.events.onReady = onPlayerReady;
    playerOptions.events.onStateChange = onPlayerStateChange;

    const player = new YT.Player(video, playerOptions);
    return player;
  }

  return {
    addPlayer
  };
}());

const managePlayer = (function makeManagePlayer() {

  const playerVars = {
    autoplay: 0,
    controls: 1,
    disablekb: 1,
    enablejsapi: 1,
    fs: 0,
    iv_load_policy: 3
  };
  const defaults = {
    height: 360,
    host: "https://www.youtube-nocookie.com",
    playerVars,
    width: 640
  };

  function show(el) {
    el.classList.remove("hide");
  }

  function combinePlayerOptions(opts1 = {}, opts2 = {}) {
    const combined = Object.assign({}, opts1, opts2);
    Object.keys(opts1).forEach(function checkObjects(prop) {
      if (typeof opts1[prop] === "object") {
        combined[prop] = Object.assign({}, opts1[prop], opts2[prop]);
      }
    });
    return combined;
  }

  function createPlayer(videoWrapper, playerOptions = {}) {
    const video = videoWrapper.querySelector(".video");
    const options = combinePlayerOptions(defaults, playerOptions);
    return videoPlayer.addPlayer(video, options);
  }

  function createCallback(wrapper, playerOptions) {
    return function callback() {
      initPlayer(wrapper, playerOptions);
    };
  }

  function playerAdder(parent, playerOptions) {
    const wrapper = parent.querySelector(".wrap");
    return function callback() {
      initPlayer(wrapper, playerOptions);
    };
  }

  function removePlayer(player) {
    setTimeout(function() {
      player.destroy(); 
    }, 8000);
  }

  function removePlayerHandler(evt) {
    const el = evt.target;
    const container = el.closest(".container");
    const wrapper = container.querySelector(".wrap");
    managePlayer.remove(wrapper.player);
  }

  function initPlayer(wrapper, playerOptions) {
    show(wrapper);
    const player = createPlayer(wrapper, playerOptions);
    wrapper.player = player;
  }

  return {
    adder: playerAdder,
    createCallback,
    remove: removePlayer,
    removePlayerHandler
  };
}());

const players = (function coverUIPlayerFacade() {

  function addPlayer(coverSelector, playerOptions) {
    const parent = document.querySelector(coverSelector).parentElement;
    const callback = managePlayer.adder(parent, playerOptions);
    manageCover.addCoverHandler(coverSelector, callback);
  }

  function init() {

    manageCover.init({
      container: ".container",
      playButton: ".thePlay"
    });

    manageUI.init({});

    manageUI.addExitHandlers(managePlayer.removePlayerHandler);

  }

  return {
    add: addPlayer,
    init
  };
}());

players.init();

function onYouTubeIframeAPIReady() {

  players.add(".playa", {});
  players.add(".playb", {});
  players.add(".playc", {});
  players.add(".playd", {});
  players.add(".playe", {
    playerVars: {
      playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
    }
  });
  players.add(".playf", {});
  players.add(".playg", {});
  players.add(".playh", {});
  players.add(".playi", {});
}

.exit {
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  border-radius: 50%;
  animation: fadeInExit 0s forwards 0s;
  opacity: 0;
  pointer-events: none;
  clip-path: circle(50%);
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

.exit svg {
  fill: red;
  transition: fill 3s ease;
}

.exit:hover svg,
.fadingOut .exit svg  {
  fill: green;
}

.fadingOut .exit {
  animation: fadeOutExit 8s forwards;
  pointer-events: none;
  opacity: 1;

}

@keyframes fadeOutExit {
  to {
    opacity: 0;
  }
}

<button class="exit" type="button" aria-label="Close">
  <svg width="100%" height="100%" viewBox="-144 -144 288 288">
    <g id="exit">
      <title>exit</title>
      <path class="ex" fill="red" d="m-101.116-101.116a143 143 0 11202.232 202.232a143 143 0 01-202.232-202.232zzzz" />
      <circle cx="0" cy="0" r="113" />
      <path class="ex" fill="blue" d="m-101.116-101.116m169.705 11.313a113 113 0 00-137.178 0l68.589 68.59zm-158.392 21.214a113 113 0 000 137.178l68.59-68.589zm21.214 158.392a113 113 0 00137.178 0l-68.589-68.59zm158.392-21.214a113 113 0 000-137.178l-68.59 68.589z" />
    </g>
  </svg>
</button>

<button class="exit" type="button" aria-label="Close">
  <svg width="100%" height="100%" viewBox="-144 -144 288 288">
    <use href="#exit" />
  </svg>
</button>

<button class="exit" type="button" aria-label="Close">
  <svg width="100%" height="100%" viewBox="-144 -144 288 288">
    <use href="#exit" />
  </svg>
</button>
<button class="exit" type="button" aria-label="Close">
  <svg width="100%" height="100%" viewBox="-144 -144 288 288">
    <use href="#exit" />
  </svg>
</button>

Answer 1

按钮的点击事件回调如下：

  function exitClickHandler() {
    resetPage()
  }

调用resetPage() 函数，它只是将fadingOut 类添加到body（设置为document.body 的变量）并导致按钮通过一些css 淡出。

这是一个带有相关部分的sn-p：

const manageUI = (function makeManageUI() {
  const body = document.body

  function resetPage() {
    body.classList.add('fadingOut')
  }

  function exitClickHandler() {
    resetPage()
    console.log('Button IS CLICKED !!!!!!!!!!!!')
  }

  function addClickToExit(exitButtons) {
    exitButtons.forEach(function addExitButtonHandler(exitButtons) {
      exitButtons.addEventListener('click', exitClickHandler)
    })
  }

  function addExitHandlers(callback) {
    const resetVideo = document.querySelectorAll('.exit')
    resetVideo.forEach(function resetVideoHandler(video) {
      video.addEventListener('click', callback)
    })
  }

  function init() {
    const exitButtons = document.querySelectorAll('.exit')
    addClickToExit(exitButtons)
  }

  return {
    init,
  }
})()

const players = (function coverUIPlayerFacade() {
  function init() {
    manageUI.init({})
  }
  return {
    init,
  }
})()

players.init()

.exit {
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border: none;
  padding: 0;
  clip-path: circle(50%);
}

.exit svg {
  fill: red;
  transition: fill 3s ease;
}

.exit:hover svg,
.fadingOut .exit svg {
  fill: green;
}

.fadingOut .exit {
  animation: fadeOutExit 8s forwards;
  pointer-events: none;
  opacity: 1;
}

@keyframes fadeOutExit {
  to {
    opacity: 0;
  }
}

<button class="exit" type="button" aria-label="Close">
  <svg width="100%" height="100%" viewBox="-144 -144 288 288">
    <g id="exit">
      <title>exit</title>
      <path class="ex" fill="red" d="m-101.116-101.116a143 143 0 11202.232 202.232a143 143 0 01-202.232-202.232zzzz" />
      <circle cx="0" cy="0" r="113" />
      <path class="ex" fill="blue" d="m-101.116-101.116m169.705 11.313a113 113 0 00-137.178 0l68.589 68.59zm-158.392 21.214a113 113 0 000 137.178l68.59-68.589zm21.214 158.392a113 113 0 00137.178 0l-68.589-68.59zm158.392-21.214a113 113 0 000-137.178l-68.59 68.589z" />
    </g>
  </svg>
</button>
<button class="exit" type="button" aria-label="Close">
  <svg width="100%" height="100%" viewBox="-144 -144 288 288">
    <use href="#exit" />
  </svg>
</button>
<button class="exit" type="button" aria-label="Close">
  <svg width="100%" height="100%" viewBox="-144 -144 288 288">
    <use href="#exit" />
  </svg>
</button>
<button class="exit" type="button" aria-label="Close">
  <svg width="100%" height="100%" viewBox="-144 -144 288 288">
    <use href="#exit" />
  </svg>
</button>