我们都知道 全局变量 不是最佳实践。但是有几个例子,没有它们就很难编码。您使用什么技术来避免使用全局变量?
例如,给定以下场景,您将如何不使用全局变量?
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 表单。它一次上传一个文件以防止大量请求。它通过 POST 到 iframe,等待触发 iframe onload 的响应,然后触发下一次提交来做到这一点。
这个例子你不必具体回答,我只是提供给参考,以供我无法想到避免全局变量的方法的情况。
原文由 Josh Stodola 发布,翻译遵循 CC BY-SA 4.0 许可协议
最简单的方法是将代码包装在闭包中,并手动仅将全局需要的那些变量公开到全局范围:
为了解决 Crescent Fresh 的评论:为了从场景中完全删除全局变量,开发人员需要更改问题中假设的一些事情。它看起来更像这样:
Java脚本:
HTML:
您 不需要
<iframe>
上的内联事件处理程序,它仍会在每次使用此代码加载时触发。关于加载事件
这是一个测试用例,表明您不需要内联
onload
事件。这取决于引用同一服务器上的文件 (/emptypage.php),否则您应该能够将其粘贴到页面中并运行它。每次我在 Safari、Firefox、IE 6、7 和 8 中单击提交按钮时都会触发警报。