Как я могу реорганизовать код, чтобы избежать глобальной области видимости?

Question

Я создал скользящее меню с js и css. «menufull» проверяет текущий статус. Если это во всю ширину, тогда это верно, иначе ложно.

Тем не менее, я хочу проверить статус в самой функции переключателя. если я напишу 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 для выбора элементов идобавление слушателей вместо использования собственных методов DOM.