Question

我用js和CSS创建了一个滑动菜单。 “ menufull”检查当前状态。如果是全角，则为true，否则为false。

但是，我想检查切换菜单功能本身的状态。如果我在函数中编写menuFull = false，则每次我进入此函数都会被重置。有什么更好的写方法？我想尽可能避免使用全局变量。

--sring.profiles.active=local or remote

Answer 1

最简单的调整就是将整个内容放到IIFE中：

(() => {
    //checks for the status of menu
    let menuFull = false;

    $(document).ready(function () {
        //Handle navigation button
        let navButton = document.getElementById("nav_button");
        navButton.addEventListener('click', function (event) {
            toggleMenu();
        })
    });

    let toggleMenu = function () {
        //Check for the status here
        let menuArea = document.getElementById("nav_container");
        let containerArea = document.getElementsByClassName("body_container")[0];

        if (menuFull) {
            menuArea.style.left = "-11.5%";
            menuFull = false;
            console.log("I am in true area!");
        } else {
            menuArea.style.left = "0%";
            containerArea.style.left = "18.5%";
            menuFull = true;
            console.log("I am in false area!")
        }

        console.log(menuFull);
    }
})();

由于它仅在toggleMenu内部使用，因此您还可以调用IIFE创建toggleMenu函数，而menuFull仅在其内部作用：

$(document).ready(function () {
    //Handle navigation button
    let navButton = document.getElementById("nav_button");
    navButton.addEventListener('click', function (event) {
        toggleMenu();
    })
});

let toggleMenu = (() => {
    //checks for the status of menu
    let menuFull = false;
    return () => {
      //Check for the status here
      let menuArea = document.getElementById("nav_container");
      let containerArea = document.getElementsByClassName("body_container")[0];

      if (menuFull) {
          menuArea.style.left = "-11.5%";
          menuFull = false;
          console.log("I am in true area!");
      } else {
          menuArea.style.left = "0%";
          containerArea.style.left = "18.5%";
          menuFull = true;
          console.log("I am in false area!")
      }

      console.log(menuFull);
  };
})();

不过，

toggleMenu仍在此处。如果您不想这样做，则可以在$(document).ready内定义它们：

$(document).ready(function () {
    let toggleMenu = (() => {
        // ...
    })();
    $('#nav_button').on('click', toggleMenu);
});

由于您已经在使用jQuery，因此应该使用jQuery的（简洁）选择元素和添加侦听器的方法，而不是使用本机DOM方法。

如何重构代码以避免全局范围？

1 个答案: