如何从动画代码中删除变量

Question

我正在尝试从代码中删除这个命名空间范围的变量。

我怎样才能做到这一点？

这能做到吗？

局部变量：let currentPlayButton = {};

const manageCover = (function makeManageCover() {

  let currentPlayButton = {};

  function animationEndHandler(evt) {
    const animationName = evt.animationName;

    if (animationName === "initial-fade") {
      body.classList.remove("initial-fade");
      showCover(currentPlayButton);
    }
  }

  function coverClickHandler(evt) {
    currentPlayButton = evt.currentTarget;
    body.classList.add("initial-fade");
  }

}());

全功能：

const manageCover = (function makeManageCover() {
  const config = {};
  const body = document.body;
  let currentPlayButton = {};

  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 showCover(playButton) {
    hideAll(config.containers);
    resetPage();
    markAsPlayed(playButton);
    const cover = playButton.parentElement;
    cover.classList.add("active");
    show(cover);
  }

  function animationEndHandler(evt) {
    const animationName = evt.animationName;

    if (animationName === "initial-fade") {
      body.classList.remove("initial-fade");
      showCover(currentPlayButton);
    }
  }

  function coverClickHandler(evt) {
    currentPlayButton = evt.currentTarget;
    body.classList.add("initial-fade");
  }

  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);
    body.addEventListener("animationend", animationEndHandler);
  }

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

Answer 1

它不是全球性的，它是 makeManageCover 本地的 - 这很好，没有什么可担心的。全局变量是有问题的，但命名空间范围的变量非常常见，很难或不可能消除。

但是如果你想将它从 makeManageCover 的顶级范围中删除，你可以创建一个 IIFE，在 IIFE 中声明它，并且 return [=13] =] 和 coverClickHandler。这与您在整个 manageCover 中使用的技术完全相同，只是规模较小。

const { animationEndHandler, coverClickHandler } = (() => {
    let currentPlayButton = {};
    function animationEndHandler(evt) {
        const animationName = evt.animationName;
        if (animationName === "initial-fade") {
            body.classList.remove("initial-fade");
            showCover(currentPlayButton);
        }
    }
    function coverClickHandler(evt) {
        currentPlayButton = evt.currentTarget;
        body.classList.add("initial-fade");
    }
    return { animationEndHandler, coverClickHandler };
})();

如何从动画代码中删除变量

How to remove variable from animation code

javascript

local-variables