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

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

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

//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);
}

最佳答案

最简单的调整是将整个内容放入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方法。