我们都知道全局变量只是最佳实践。但是在有些情况下,没有它们很难编写代码。您使用什么技术来避免使用全局变量?
例如,在以下情况下,您将如何不使用全局变量?
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. -->
此代码来自具有多个的网络表单<inputtype="file">。它一次上传一个文件,以防止大量请求。它通过POST到iframe来完成此操作,等待响应触发iframeonload,然后触发下一个提交。
<inputtype="file">
您不必专门回答此示例,我只是将其提供给我无法思考避免全局变量的情况的参考。
最简单的方法是将代码包装在闭包中,然后仅将全局所需的那些变量手动公开给全局范围:
(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>,它仍会在每次加载此代码时触发。
<iframe>
关于负载事件
这是一个测试案例,表明您不需要内联onload事件。这取决于引用同一服务器上的文件(/emptypage.php),否则您应该可以将其粘贴到页面中并运行它。
onload
<!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中单击“提交”按钮时,都会触发警报。