Javascript 避免全局变量的优雅解

我试图找到一种优雅且可读的方法来摆脱这个全局变量，但找不到一种方法。请不要使用jQuery，它应该在没有任何导入的情况下工作

var anzahlErg=0// 只需将所有代码包装在中即可。这被称为，在JS中非常常见，因为函数会产生自己的作用域

接下来，这一行：

window.onload = ajax(anfang);

将在遇到
ajax（anfang）
时立即运行，而不是等待
load
事件。它的编写方式是：“立即运行此函数，它返回的任何函数都应该注册为在
window.load
发生时调用的函数。”相反，您需要将其包装在一个函数中，该函数本身将成为处理程序

此外，您应该使用
.addEventListener（）
来注册事件处理程序，而不是对象属性，例如
onload
或
.onreadystatechange

(function(){
  var anzahlErg = 0; //<--- THIS IS NOW LOCAL TO THE IIFE

  function ajax(f) {
    var xhttp = new XMLHttpRequest();

    xhttp.addEventListener("readystatechange", function() {
      if (this.readyState == 4 && this.status == 200) {
        f(this.responseText);
      }
    });

    xhttp.open("POST", "ajax1.php", true); // SELECT COUNT(*)
    xhttp.send();
  }

  function anfang(response) {
    anzahlErg = response;
  }

  function nachher(response) {
    if (anzahlErg != 0 && response != anzahlErg) {
      location.reload();
    }
  }

  window.addEventListener("load", function() {
    ajax(anfang)
  });

  setInterval(function() {
    return ajax(nachher)
  }, 250); //Polling Interval
})();

（函数（）{
var anzahlErg=0；//无需进行所有编码。只需将值包装在加载函数的eventhandler中，即可将其从全局隐藏。请注意，这不会运行，但至少我在第一个错误后添加了clearInterval。；）

此示例还使用内置方法，该方法与承诺一起工作，使代码更具可读性


window.addEventListener（'load'，function（）{
让结果；
let interval=setInterval（（）=>{
fetch（'ajax1.php'{
方法：“发布”
})。然后（响应=>{
let count=parseInt（response.text）；
如果（结果===未定义）{
结果=计数；
返回；
}
如果（结果！==计数）{
间隔时间；
document.location.reload（）；
}
}).捕获（（）=>clearInterval（interval））；
}, 250);
})
其他人已经戏剧性地更改了您的代码，它们是很好的解决方案，但我想我应该介绍闭包以及如何在您的情况下使用它们



函数ajax（f）{
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
f（此响应文本）；
}
};
open（“POST”，“ajax1.php”，true）；//选择COUNT（*）
xhttp.send（）；
}
函数cachedPoll（）{
var anzahlErg=0；
返回{
安防：安防功能（响应）{
anzahlErg=响应；
},
nachher：功能nachher（响应）{
如果（anzahlErg！=0&&response！=anzahlErg）{
location.reload（）；
}
}
};
}
var pollers=cachedPoll（）；
window.onload=函数（）{
阿贾克斯（pollers.anfang）；
};
setInterval（函数（）{
返回ajax（pollers.nachher）
}，250）；//轮询间隔
您可以将属性绑定到ajax函数，但实际上最干净的方法是使用Scott Marcus的答案

function ajax(f) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      f(this.responseText);
    }
  };
  xhttp.open("POST", "ajax1.php", true); // SELECT COUNT(*)
  xhttp.send();
}
ajax.anzahlErg = 0; // This is now a property of the ajax object and not the window object

function anfang(response) {
  ajax.anzahlErg = response;
}

function nachher(response) {
  if (ajax.anzahlErg != 0 && response != ajax.anzahlErg) {
    location.reload();
  }
}

window.onload = ajax(anfang);
  setInterval(function() {
    return ajax(nachher)
}, 250); //Polling Interval

您可以将其作为数据属性，甚至作为id绑定到某个html元素，但我不确定这在您的情况下有多优雅。您为什么要创建自己的请求，而不使用fetch？还要注意，您正在调用
ajax（anfag）
，而不是将其附加到onload事件（因此本质上这是一个无用的赋值）你为什么要首先去掉全局变量？代码到底应该做什么？可能是因为全局变量被考虑在内了harmful@tyteen4a03因为我们应该尽量避免全局性？事实上，
f
是他的回调函数，你现在写的代码已经不起作用了；）所以它不是一个误写十如果statement@Icepickle嗯，不是真的。你是对的，它看起来是一个函数，但不是他的回调。它是从他的回调调用的。而且，他把它设置为参数的方式，看起来不像他在传递一个函数。它是一个ajax函数的参数，还请注意，你的IIFE缺少一个
{
在
var anzahlErg
前面，缺少一个关闭
}
作为well@ScottMarcus在我看来，在这种情况下，将整个代码库包装在IIFE中是毫无意义的。从技术上讲，它可能不是一个全局变量，但它仍然是一个“全局变量”变量。模态模式用于代码的子集，而不是整个代码库。除非OP有更多的代码，否则它们不会显示给我们。@SpencerWieczorek这是一个观点。任何标识符与类似名称的标识符冲突的潜在影响都得到了缓解。而且，我不确定您是从哪里得到模块模式用于su的想法的B代码集。它是用于模块的。您见过JQuery是如何设置的吗？