我们都知道global variables不是最佳做法。但有几个例子，没有它们很难编码。您使用什么技术来避免使用全局变量？
例如，鉴于以下情况，您将如何使用全局变量？
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 onload的响应，然后触发下一次提交来完成此操作。
您不必专门回答这个例子，我只是提供它来参考我无法想到避免全局变量的方法。
答案 0 :(得分：64)
最简单的方法是将代码包装在一个闭包中，并手动将全局需要的变量公开到全局范围：
(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中的提交按钮时，警报都会触发。
答案 1 :(得分：55)
我建议使用module pattern。
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
答案 2 :(得分：7)
首先，不可能避免使用全局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方式进行此操作（如果你的想象力可以使用模块模式）。
答案 3 :(得分：4)
有时在JavaScript中使用全局变量是有意义的。但是不要让它们像那样直接悬挂在窗外。
相反，创建一个“命名空间”对象来包含你的全局变量。对于奖励积分，请将所有内容都包括在内，包括您的方法。
答案 4 :(得分：4)
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);
}
}
答案 5 :(得分：2)
执行此操作的其他方法是创建一个对象，然后向其中添加方法。
var object = {
a = 21,
b = 51
};
object.displayA = function() {
console.log(object.a);
};
object.displayB = function() {
console.log(object.b);
};
通过这种方式，只显示对象'obj'并附加方法。它相当于在命名空间中添加它。
答案 6 :(得分：1)
有些事情将出现在全局命名空间中 - 即，您从内联JavaScript代码调用的任何函数。
一般来说，解决方案是将所有内容都包装在一个闭包中：
(function() {
var uploadCount = 0;
function startupload() { ... }
document.getElementById('postHere').onload = function() {
uploadCount ++;
if (uploadCount > 1) startUpload();
};
})();
并避免使用内联处理程序。
答案 7 :(得分：1)
对于中小型项目，使用闭包可能没问题。但是，对于大型项目，您可能希望将代码拆分为模块并将其保存在不同的文件中。
因此我写了jQuery Secret plugin来解决问题。
在使用此插件的情况下，代码看起来如下所示。
// 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>
打开你的Firebug，你会发现根本没有全局，甚至没有功能：）
答案 8 :(得分：1)
我以这种方式使用它：
{
var globalA = 100;
var globalB = 200;
var globalFunc = function() { ... }
let localA = 10;
let localB = 20;
let localFunc = function() { ... }
localFunc();
}
对于所有全局范围，请使用'var'；对于本地范围，请使用'let'。
答案 9 :(得分：0)
使用闭包。这样的东西为你提供了一个除全球范围之外的范围。
(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
})();
答案 10 :(得分：0)
为了确保＆＃34;诱导全局变量：
function gInitUploadCount() {
var uploadCount = 0;
gGetUploadCount = function () {
return uploadCount;
}
gAddUploadCount= function () {
uploadCount +=1;
}
}
gInitUploadCount();
gAddUploadCount();
console.log("Upload counter = "+gGetUploadCount());
我是JS的新手，目前在一个项目中使用它。 （我赞成任何评论和批评）