如何用闭包封装全局变量checkFlag？页面离开提示功能优化

可以把所有相关逻辑封装到一个自执行闭包中，让checkFlag、checkValue等变量只在闭包内部可见，避免全局污染，同时修复原代码中formAlert无法访问checkValue的隐藏问题：

(() => {
  // 闭包内的状态变量，不会暴露到全局
  let checkFlag = false;
  let checkValue;

  const onBeforeunloadHandler = function(e) {
    const msg = '';
    e.returnValue = msg;
  };

  const formAlert = function() {
    if (!checkFlag) {
      window.addEventListener('beforeunload', onBeforeunloadHandler);
      for (let i = 0; i < checkValue.length; i++) {
        checkValue[i].removeEventListener('input', formAlert);
        checkValue[i].removeEventListener('change', formAlert);
      }
      checkFlag = true;
    }
  };

  // 初始化逻辑
  checkValue = document.querySelectorAll("input[form='test'], textarea[form='test']");
  const submitBtn = document.querySelector('button[type="button"]');
  
  for (let i = 0; i < checkValue.length; i++) {
    checkValue[i].addEventListener('input', formAlert);
    checkValue[i].addEventListener('change', formAlert);
  }
  
  submitBtn.addEventListener('click', function() {
    window.removeEventListener('beforeunload', onBeforeunloadHandler);
    // 可选：如果提交后需要允许用户再次编辑并触发提示，可打开以下代码
    // checkFlag = false;
    // for (let i = 0; i < checkValue.length; i++) {
    //   checkValue[i].addEventListener('input', formAlert);
    //   checkValue[i].addEventListener('change', formAlert);
    // }
  });
})();

关键改动说明： #

• 把checkFlag、checkValue、onBeforeunloadHandler、formAlert全部放到自执行闭包内部，这些变量和函数不再暴露到全局作用域
• 修复了原代码中formAlert无法访问checkValue的隐藏bug（原代码里checkValue是自执行函数内的局部变量，全局的formAlert根本拿不到这个值）
• 将循环中的var替换为let，避免变量提升导致的循环事件绑定异常
• 提供了可选的重置逻辑，满足提交后再次编辑触发提示的场景需求

内容的提问来源于stack exchange，提问作者Heisenberg