如何避免JavaScript中的全局变量？

Question

如何避免JavaScript中的全局变量？我们都知道全局变量不是最佳实践。但有几个例子，没有它们很难编码。您使用什么技术来避免使用全局变量？例如，给定以下场景，您将如何使用全局变量？JavaScript代码：var uploadCount = 0;window.onload = function() {     var frm = document.forms[0];     frm.target = "postMe";     frm.onsubmit = function() {         startUpload();         return false;     }}function startUpload() {     var fil = document.getElementById("FileUpload" + uploadCount);     if (!fil || fil.value.length == 0) {         alert("Finished!");         document.forms[0].reset();         return;     }     disableAllFileInputs();     fil.disabled = false;     alert("Uploading file " + uploadCount);     document.forms[0].submit();}相关标记：<iframe src="test.htm" name="postHere" id="postHere"   onload="uploadCount++; if(uploadCount > 1) startUpload();"></iframe><!-- MUST use inline JavaScript here for onload event      to fire after each form submission. -->此代码来自具有多个的Web表单<input type="file">。它一次上传一个文件以防止大量请求。它通过POST到iframe，等待触发iframe onload的响应，然后触发下一次提交来完成此操作。您不必专门回答这个例子，我只是提供它来参考我无法想到避免全局变量的方法。

Answer 1

首先，不可能避免使用全局JavaScript，有些东西总是悬在全球范围内。即使您创建了一个名称空间，这仍然是一个好主意，该名称空间将是全局的。

但是，有许多方法不滥用全球范围。两个最简单的方法是使用闭包，或者因为你只需要跟踪一个变量，只需将其设置为函数本身的属性（然后可以将其视为static变量）。

关闭

var startUpload = (function() {
  var uploadCount = 1;  // <----
  return function() {
    var fil = document.getElementById("FileUpload" + uploadCount++);  // <----

    if(!fil || fil.value.length == 0) {    
      alert("Finished!");
      document.forms[0].reset();
      uploadCount = 1; // <----
      return;
    }

    disableAllFileInputs();
    fil.disabled = false;
    alert("Uploading file " + uploadCount);
    document.forms[0].submit();
  };})();

*请注意，uploadCount此处内部正在进行递增

功能属性

var startUpload = function() {
  startUpload.uploadCount = startUpload.count || 1; // <----
  var fil = document.getElementById("FileUpload" + startUpload.count++);

  if(!fil || fil.value.length == 0) {    
    alert("Finished!");
    document.forms[0].reset();
    startUpload.count = 1; // <----
    return;
  }

  disableAllFileInputs();
  fil.disabled = false;
  alert("Uploading file " + startUpload.count);
  document.forms[0].submit();};

我不确定为什么uploadCount++; if(uploadCount > 1) ...有必要，因为看起来条件总是如此。但是如果你确实需要对变量进行全局访问，那么上面描述的函数属性方法将允许你这样做，而变量实际上不是全局变量。

<iframe src="test.htm" name="postHere" id="postHere"
  onload="startUpload.count++; if (startUpload.count > 1) startUpload();"></iframe>

但是，如果是这种情况，那么您应该使用对象文字或实例化对象，并以正常的OO方式进行此操作（如果它可以使用模块模式，则可以使用模块模式）。