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

84

我们都知道，全局变量只是最佳实践。但是在有些情况下，没有它们很难编写代码。您使用什么技术来避免使用全局变量？

例如，在以下情况下，您将如何不使用全局变量？

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">。它一次上传一个文件，以防止大量请求。它通过POST到iframe来完成此操作，等待响应触发iframe加载，然后触发下一个提交。

您不必专门回答此示例，我只是将其提供给我无法思考避免全局变量的情况的参考。

javascript  global-variables 
— 乔什·斯托多拉
source
3
使用立即调用函数表达式（IIFE）您可以在这里阅读更多：codearsenal.net/2014/11/...

Answers:

69

最简单的方法是将代码包装在闭包中，然后仅手动将全局需要的那些变量公开给全局作用域：

(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中单击“提交”按钮时，都会触发警报。

— 失眼
source
或提供某种访问器。我同意。
— 09年
3
当人们为自己的东西投反对票以解释其投反对票的理由时，这会很有帮助。
— 眼睑失明
6
我没有拒绝投票。但是，说window ['varName'] = varName与在闭包之外进行全局var声明相同。 var foo = "bar"; (function() { alert(window['foo']) })();
— 乔什·斯托多拉
您回答了标题，而不是问题。我不喜欢那样 将闭包成语放在来自内联事件处理程序的引用的上下文中（随着问题的解决），会更好。
— 新月鲜食
1
新月新鲜食品，我回答了这个问题。为了避免全局功能，需要重新设计问题的假设。该答案以问题的假设为指导（例如，内联事件处理程序），并允许开发人员仅选择必要的全局访问点，而不选择全局范围内的所有内容。
— 眼睑失明
59

我建议使用模块模式。

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
— en
source
3
我会+1，因为我了解这一点，它非常有帮助，但是我仍然不清楚在仅使用一个全局变量的情况下这会产生多大的效果。如果我错了，请纠正我，但是执行此函数并返回它会使返回的对象存储在中YAHOO.myProject.myModule，这是一个全局变量。对？
— Josh Stodola，
11
@Josh：全局变量不是邪恶的。全局变量_S_是邪恶的。尽可能减少全局变量的数量。
— erenon
每次您要访问“模块”公共属性/方法之一时，都会执行整个匿名函数，对吗？
— UpTheCreek 2011年
@UpTheCreek：不，不会。当程序在最后一行遇到Closeing（）时，它仅执行一次，并且返回的对象将被分配给myModule属性，并且该闭合包含myPrivateVar和myPrivateMethod。
— erenon 2011年
很漂亮，正是我一直在寻找的东西。这使我可以将页面逻辑与jquery事件处理分开。一个问题，利用XSS攻击，攻击者仍然可以正确访问YAHOO.myProject.myModule？只是不给外部函数命名并放一个（）会更好吗？最后在$（document）.ready周围呢？也许修改了YAHOO.myProct.myModule属性的元对象？我刚刚花了很多时间在js理论上，现在正在尝试将其整合在一起。
— Dale 2012年
8

首先，无法避免使用全局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方式进行操作（如果您愿意，可以使用模块模式）。

— 贾斯汀·约翰逊（Justin Johnson）
source
1
您绝对可以避免全局范围。在您的“关闭”示例中，只需从一开始就删除“ var startUpload =”，该函数将被完全封闭，并且在全局级别没有可访问性。实际上，许多人更喜欢公开一个变量，其中包含对其他所有变量的引用
— derrylwc 2013年
1
@derrylwc在这种情况下，startUpload就是您所指的那个变量。var startUpload = 从闭包示例中删除意味着内部函数将永远无法执行，因为没有对其的引用。避免全球范围污染的问题与内部计数器变量有关，uploadCount该变量由startUpload。而且，我认为OP试图避免使用内部使用的uploadCount变量污染此方法之外的任何范围。
— 贾斯汀·约翰逊
如果匿名闭包中的代码将上载程序添加为事件侦听器，则无论何时发生适当的事件，它都“将能够执行”。
— 达米安·耶里克
6

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

而是，创建一个“命名空间”对象来包含您的全局变量。为了获得奖励积分，请将所有内容（包括您的方法）放入其中。

— 诺斯雷德纳
source
我怎样才能做到这一点？创建一个名称空间对象来包含我的全局变量？
— p.matsinopoulos
5 
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);  
    }       
}
— 混沌潘迪翁
source
如何onload在iframe的处理程序中增加uploadCount ？这很关键。
— Josh Stodola，
1
好，我知道你在这里做什么。不幸的是，这是不一样的。这会分别触发所有上传，但同时会触发（从技术上讲，它们之间有100ms）。当前解决方案按顺序上载它们，这意味着第二个上载要等到第一个上载完成才开始。这就是为什么onload需要内联处理程序的原因。以编程方式分配处理程序无效，因为它仅在第一次触发。内联处理程序每​​次都会触发（无论出于何种原因）。
— Josh Stodola，
不过，我仍然要+1，因为我确实看到这是隐藏全局变量的有效方法
— Josh Stodola，2009年
您可以为每次上传创建一个iframe，以维护各个回调。
— 贾斯汀·约翰逊2009年
1
我认为这最终是一个很好的答案，只是由于特定示例的要求而已。基本上，这个想法是创建一个模板（对象）并使用“ new”实例化它。这可能是最好的答案，因为它确实避免了全局变量，即没有妥协
— PandaWood
3

完成此操作的另一种方法是创建一个对象，然后向其添加方法。 

var object = {
  a = 21,
  b = 51
};

object.displayA = function() {
 console.log(object.a);
};

object.displayB = function() {
 console.log(object.b);
};

这样，仅公开对象“ obj”并为其附加方法。等效于将其添加到名称空间中。

— 阿杰·波沙克（Ajay Poshak）
source
2

全局命名空间中将包含一些内容-即，从内联JavaScript代码调用的任何函数。

通常，解决方案是将所有内容包装在闭包中：

(function() {
    var uploadCount = 0;
    function startupload() {  ...  }
    document.getElementById('postHere').onload = function() {
        uploadCount ++;
        if (uploadCount > 1) startUpload();
    };
})();

并避免使用内联处理程序。

— 吉米
source
在这种情况下，需要内联处理程序。当表单提交给iframe时，以编程方式设置的onload处理程序将不会触发。
— Josh Stodola，
1
@Josh：哇，真的吗？iframe.onload = ...不等于<iframe onload="..."？
— 新
2

对于中小型项目，可以使用闭包。但是，对于大型项目，您可能需要将代码拆分为模块，然后将其保存在其他文件中。

因此我写了jQuery Secret插件来解决该问题。

在您使用此插件的情况下，代码如下所示。

JavaScript：

// Initialize uploadCount.
$.secret( 'in', 'uploadCount', 0 ).

// Store function disableAllFileInputs.
secret( 'in', 'disableAllFileInputs', function(){
  // Code for 'disable all file inputs' goes here.

// Store function startUpload
}).secret( 'in', 'startUpload', function(){
    // 'this' points to the private object in $.secret
    // where stores all the variables and functions
    // ex. uploadCount, disableAllFileInputs, startUpload.

    var fil = document.getElementById( 'FileUpload' + uploadCount);

    if(!fil || fil.value.length == 0) {
        alert( 'Finished!' );
        document.forms[0].reset();
        return;
    }

    // Use the stored disableAllFileInputs function
    // or you can use $.secret( 'call', 'disableAllFileInputs' );
    // it's the same thing.
    this.disableAllFileInputs();
    fil.disabled = false;

    // this.uploadCount is equal to $.secret( 'out', 'uploadCount' );
    alert( 'Uploading file ' + this.uploadCount );
    document.forms[0].submit();

// Store function iframeOnload
}).secret( 'in', 'iframeOnload', function(){
    this.uploadCount++;
    if( this.uploadCount > 1 ) this.startUpload();
});

window.onload = function() {
    var frm = document.forms[0];

    frm.target = "postMe";
    frm.onsubmit = function() {
        // Call out startUpload function onsubmit
        $.secret( 'call', 'startUpload' );
        return false;
    }
}

相关标记：

<iframe src="test.htm" name="postHere" id="postHere" onload="$.secret( 'call', 'iframeOnload' );"></iframe>

打开你的萤火虫，您根本找不到任何全局变量，甚至连功能都没有:)

有关完整文档，请参见此处。

有关演示页面，请参阅此。

GitHub上的源代码。

— 本
source
1

使用闭包。这样的事情为您提供了除全局之外的范围。

(function() {
    // Your code here
    var var1;
    function f1() {
        if(var1){...}
    }

    window.var_name = something; //<- if you have to have global var
    window.glob_func = function(){...} //<- ...or global function
})();
— 零色
source
我过去的方法是定义一个特定的全局变量对象，并将所有全局变量附加到该对象。我该如何将其包装在瓶盖中？遗憾的是，注释框限制不允许我嵌入典型代码。
— David Edwards
1

对于“确保”的全局全局变量：

function gInitUploadCount() {
    var uploadCount = 0;

    gGetUploadCount = function () {
        return uploadCount; 
    }
    gAddUploadCount= function () {
        uploadCount +=1;
    } 
}

gInitUploadCount();
gAddUploadCount();

console.log("Upload counter = "+gGetUploadCount());
展开摘要

我是JS的新手，目前在一个项目中使用它。（我非常感谢任何评论和批评）

— Koenees
source
1

我用这种方式：

{
    var globalA = 100;
    var globalB = 200;
    var globalFunc = function() { ... }

    let localA = 10;
    let localB = 20;
    let localFunc = function() { ... }

    localFunc();
}

对于所有全局范围，请使用“ var”，对于本地范围，请使用“ let”。

— 阿什温
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.