如何避免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. -->
此代码来自具有多个<input type="file">的Web表单。 它一次上传一个文件以防止发生巨大的请求。 它通过发送到iframe来完成，等待触发iframe onload的响应，然后触发下一个提交。
你不必特别回答这个例子，我只是提供它来参考一个我无法想到避免全局变量的方法的情况。
最简单的方法是将代码封装在一个闭包中，并手动将全局所需的变量全局暴露给全局范围：
(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中的提交按钮时，都会触发警报。
我建议模块模式。
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
首先，避免全局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) ... uploadCount++; if(uploadCount > 1) ...是必要的，因为它看起来情况总是如此。 但是，如果您确实需要全局访问该变量，那么上面描述的函数属性方法将允许您在没有变量实际为全局的情况下执行此操作。
<iframe src="test.htm" name="postHere" id="postHere"
onload="startUpload.count++; if (startUpload.count > 1) startUpload();"></iframe>
但是，如果是这种情况，那么你应该使用一个对象字面值或实例化对象，并以正常的OO方式来处理这个问题（如果它触发了你的想法，你可以使用模块模式）。
链接地址: http://www.djcxy.com/p/18331.html上一篇: How to avoid global variables in JavaScript?
下一篇: Haxe for javascript without global namespace pollution?