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

IT技术 javascript global-variables
2021-02-06 11:52:32

我们都知道全局变量不是最佳实践。但是有几个例子没有它们就很难编码。您使用什么技术来避免使用全局变量?

例如,给定以下场景,如何不使用全局变量?

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. -->

此代码来自具有多个<input type="file">. 它一次上传一个文件以防止大量请求。通过向 iframe 发送POST来完成此操作,等待在加载时触发 iframe 的响应,然后触发下一次提交。

这个例子不用你具体回答,我只是提供给一个我想不出避免全局变量的方法的情况。

6个回答

最简单的方法是将您的代码包装在一个闭包中,并手动仅将您需要的那些变量公开到全局范围:

(function() {
    // Your code here

    // Expose to global
    window['varName'] = varName;
})();

为了解决 Crescent Fresh 的评论:为了从场景中完全删除全局变量,开发人员需要更改问题中假设的许多内容。它看起来更像这样:

Javascript:

(function() {
    var addEvent = function(element, type, method) {
        if('addEventListener' in element) {
            element.addEventListener(type, method, false);
        } else if('attachEvent' in element) {
            element.attachEvent('on' + type, method);

        // If addEventListener and attachEvent are both unavailable,
        // use inline events. This should never happen.
        } else if('on' + type in element) {
            // If a previous inline event exists, preserve it. This isn't
            // tested, it may eat your baby
            var oldMethod = element['on' + type],
                newMethod = function(e) {
                    oldMethod(e);
                    newMethod(e);
                };
        } else {
            element['on' + type] = method;
        }
    },
        uploadCount = 0,
        startUpload = function() {
            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();
        };

    addEvent(window, 'load', function() {
        var frm = document.forms[0];

        frm.target = "postMe";
        addEvent(frm, 'submit', function() {
            startUpload();
            return false;
        });
    });

    var iframe = document.getElementById('postHere');
    addEvent(iframe, 'load', function() {
        uploadCount++;
        if(uploadCount > 1) {
            startUpload();
        }
    });

})();

HTML:

<iframe src="test.htm" name="postHere" id="postHere"></iframe>

在 上不需要内联事件处理程序<iframe>,它仍然会在每次加载此代码时触发。

关于加载事件

这是一个测试用例,证明您不需要内联onload事件。这取决于在同一服务器上引用文件 (/emptypage.php),否则您应该能够将其粘贴到页面中并运行它。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>untitled</title>
</head>
<body>
    <script type="text/javascript" charset="utf-8">
        (function() {
            var addEvent = function(element, type, method) {
                if('addEventListener' in element) {
                    element.addEventListener(type, method, false);
                } else if('attachEvent' in element) {
                    element.attachEvent('on' + type, method);

                    // If addEventListener and attachEvent are both unavailable,
                    // use inline events. This should never happen.
                } else if('on' + type in element) {
                    // If a previous inline event exists, preserve it. This isn't
                    // tested, it may eat your baby
                    var oldMethod = element['on' + type],
                    newMethod = function(e) {
                        oldMethod(e);
                        newMethod(e);
                    };
                } else {
                    element['on' + type] = method;
                }
            };

            // Work around IE 6/7 bug where form submission targets
            // a new window instead of the iframe. SO suggestion here:
            // http://stackoverflow.com/q/875650
            var iframe;
            try {
                iframe = document.createElement('<iframe name="postHere">');
            } catch (e) {
                iframe = document.createElement('iframe');
                iframe.name = 'postHere';
            }

            iframe.name = 'postHere';
            iframe.id = 'postHere';
            iframe.src = '/emptypage.php';
            addEvent(iframe, 'load', function() {
                alert('iframe load');
            });

            document.body.appendChild(iframe);

            var form = document.createElement('form');
            form.target = 'postHere';
            form.action = '/emptypage.php';
            var submit = document.createElement('input');
            submit.type = 'submit';
            submit.value = 'Submit';

            form.appendChild(submit);

            document.body.appendChild(form);
        })();
    </script>
</body>
</html>

每次我在 Safari、Firefox、IE 6、7 和 8 中单击提交按钮时都会触发警报。

Crescent Fresh,我回答了这个问题。需要重新设计问题的假设以避免全局函数。该答案以问题的假设(例如内联事件处理程序)为指导,并允许开发人员仅选择必要的全局访问点,而不是全局范围内的所有内容。
2021-03-20 11:52:32
或者提供某种访问器。我同意。
2021-03-21 11:52:32
当人们为他们投票反对时,解释他们投票反对的理由是有帮助的。
2021-03-25 11:52:32
我没有投反对票。但是,说 window['varName'] = varName 与在闭包之外进行全局 var 声明相同。 var foo = "bar"; (function() { alert(window['foo']) })();
2021-04-09 11:52:32
你回答的是标题,而不是问题。我不喜欢那样。将闭包习语放在来自内联事件处理程序的引用的上下文中(正如问题的核心所在)会更好。
2021-04-10 11:52:32

我建议使用module模式

YAHOO.myProject.myModule = function () {

    //"private" variables:
    var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule.";

    //"private" method:
    var myPrivateMethod = function () {
        YAHOO.log("I can be accessed only from within YAHOO.myProject.myModule");
    }

    return  {
        myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty."
        myPublicMethod: function () {
            YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");

            //Within myProject, I can access "private" vars and methods:
            YAHOO.log(myPrivateVar);
            YAHOO.log(myPrivateMethod());

            //The native scope of myPublicMethod is myProject; we can
            //access public members using "this":
            YAHOO.log(this.myPublicProperty);
        }
    };

}(); // the parens here cause the anonymous function to execute and return
漂亮,正是我一直在寻找的。这允许我将我的页面逻辑与我的 jquery 事件处理分开。一个问题,通过 XSS 攻击,攻击者仍然可以访问 YAHOO.myProject.myModule,对吗?不命名外部函数并放置一个 () 不是更好吗?最后,在 $(document).ready 周围?也许修改了 YAHOO.myProct.myModule 属性的元对象?我刚刚在 js 理论中投入了相当多的时间,现在正试图将它们整合在一起。
2021-03-12 11:52:32
@Josh:全局变量不是邪恶的。全局变量_S_ 是邪恶的。保持全局变量的数量尽可能少。
2021-03-21 11:52:32
每次您想访问“module”公共属性/方法之一时,都会执行整个匿名函数,对吗?
2021-03-29 11:52:32
我会+1,因为我理解这一点并且它非常有帮助,但我仍然不清楚在我只使用一个全局变量的情况下这会有多有效。如果我错了,请纠正我,但执行此函数并返回它会导致返回的对象存储在 中YAHOO.myProject.myModule,这是一个全局变量。对?
2021-04-02 11:52:32
@UpTheCreek:不,不会。它只执行一次,当程序在最后一行遇到closure() 时,返回的对象将被分配给myModule 属性,其中包含myPrivateVar 和myPrivateMethod 的闭包。
2021-04-08 11:52:32

首先,避免全局 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 方式进行处理(如果您喜欢,可以使用module模式)。

@derrylwc 在这种情况下,startUpload是您所指的单个变量。var startUpload = 从闭包示例中删除意味着内部函数将永远无法执行,因为没有对它的引用。避免全局范围污染的问题与内部计数器变量有关,uploadCount变量startUpload. 此外,我认为 OP 试图避免使用内部使用的uploadCount变量污染此方法之外的任何范围
2021-03-13 11:52:32
如果匿名闭包中的代码将上传器添加为事件侦听器,那么无论何时发生适当的事件,它当然“将能够被执行”。
2021-03-23 11:52:32
您绝对可以避免全局范围。在您的 'Closure' 示例中,只需从开头删除 'var startUpload = ',该函数将被完全封闭,在全局级别无法访问。在实践中,许多人更喜欢公开一个变量,其中包含对其他所有内容的引用
2021-03-28 11:52:32

有时在 JavaScript 中使用全局变量是有意义的。但是不要让它们像那样直接挂在窗户上。

相反,创建一个“命名空间”对象来包含您的全局变量。对于奖励积分,把所有东西都放在那里,包括你的方法。

我怎样才能做到这一点?创建一个命名空间对象来包含我的全局变量?
2021-04-11 11:52:32
window.onload = function() {
  var frm = document.forms[0];
  frm.target = "postMe";
  frm.onsubmit = function() {
    frm.onsubmit = null;
    var uploader = new LazyFileUploader();
    uploader.startUpload();
    return false;
  }
}

function LazyFileUploader() {
    var uploadCount = 0;
    var total = 10;
    var prefix = "FileUpload";  
    var upload = function() {
        var fil = document.getElementById(prefix + 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();
        uploadCount++;

        if (uploadCount < total) {
            setTimeout(function() {
                upload();
            }, 100); 
        }
    }

    this.startUpload = function() {
        setTimeout(function() {
            upload();
        }, 100);  
    }       
}
不过我还是要+1,因为我确实看到这是隐藏全局变量的有效方法
2021-03-17 11:52:32
您可以为每次上传创建一个 iframe 以维护各个回调。
2021-03-24 11:52:32
如何onload在 iframe 上增加处理程序内的 uploadCount 这是至关重要的。
2021-04-03 11:52:32
我认为这最终是一个很好的答案,只是因特定示例的要求而略显模糊。基本上这个想法是创建一个模板(对象)并使用'new'来实例化它。这可能是最好的答案,因为它真正避免了全局变量,即毫不妥协
2021-04-06 11:52:32
好的,我明白你在这里做了什么。不幸的是,这不一样。这会单独触发所有上传,但同时(从技术上讲,它们之间有 100 毫秒)。当前的解决方案是按顺序上传它们,这意味着在第一次上传完成之前不会开始第二次上传。onload就是需要内联处理程序的原因以编程方式分配处理程序不起作用,因为它只在第一次触发。内联处理程序每​​次都会触发(无论出于何种原因)。
2021-04-10 11:52:32