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

Question

我用js和css创建了一个滑动菜单。 “menufull”检查当前状态。如果它是全 Angular 则为 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);
}

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 的(简洁)方法来选择元素并添加监听器，而不是使用 native DOM 方法。