如何避免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&nbsp;startUpload&nbsp;=&nbsp;(function()&nbsp;{ &nbsp;&nbsp;var&nbsp;uploadCount&nbsp;=&nbsp;1;&nbsp;&nbsp;//&nbsp;<---- &nbsp;&nbsp;return&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;fil&nbsp;=&nbsp;document.getElementById("FileUpload"&nbsp;+&nbsp;uploadCount++);&nbsp;&nbsp;//&nbsp;<---- &nbsp;&nbsp;&nbsp;&nbsp;if(!fil&nbsp;||&nbsp;fil.value.length&nbsp;==&nbsp;0)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("Finished!"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.forms[0].reset(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uploadCount&nbsp;=&nbsp;1;&nbsp;//&nbsp;<---- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;disableAllFileInputs(); &nbsp;&nbsp;&nbsp;&nbsp;fil.disabled&nbsp;=&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;alert("Uploading&nbsp;file&nbsp;"&nbsp;+&nbsp;uploadCount); &nbsp;&nbsp;&nbsp;&nbsp;document.forms[0].submit(); &nbsp;&nbsp;};})();*请注意，uploadCount此处内部正在进行递增功能属性var&nbsp;startUpload&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;startUpload.uploadCount&nbsp;=&nbsp;startUpload.count&nbsp;||&nbsp;1;&nbsp;//&nbsp;<---- &nbsp;&nbsp;var&nbsp;fil&nbsp;=&nbsp;document.getElementById("FileUpload"&nbsp;+&nbsp;startUpload.count++); &nbsp;&nbsp;if(!fil&nbsp;||&nbsp;fil.value.length&nbsp;==&nbsp;0)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;alert("Finished!"); &nbsp;&nbsp;&nbsp;&nbsp;document.forms[0].reset(); &nbsp;&nbsp;&nbsp;&nbsp;startUpload.count&nbsp;=&nbsp;1;&nbsp;//&nbsp;<---- &nbsp;&nbsp;&nbsp;&nbsp;return; &nbsp;&nbsp;} &nbsp;&nbsp;disableAllFileInputs(); &nbsp;&nbsp;fil.disabled&nbsp;=&nbsp;false; &nbsp;&nbsp;alert("Uploading&nbsp;file&nbsp;"&nbsp;+&nbsp;startUpload.count); &nbsp;&nbsp;document.forms[0].submit();};我不确定为什么uploadCount++; if(uploadCount > 1) ...有必要，因为看起来条件总是如此。但是如果你确实需要对变量进行全局访问，那么上面描述的函数属性方法将允许你这样做，而变量实际上不是全局变量。<iframe&nbsp;src="test.htm"&nbsp;name="postHere"&nbsp;id="postHere" &nbsp;&nbsp;onload="startUpload.count++;&nbsp;if&nbsp;(startUpload.count&nbsp;>&nbsp;1)&nbsp;startUpload();"></iframe>但是，如果是这种情况，那么您应该使用对象文字或实例化对象，并以正常的OO方式进行此操作（如果它可以使用模块模式，则可以使用模块模式）。