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">。巨大なリクエストを防ぐために、ファイルを1つずつアップロードします。これは [〜＃〜] post [〜＃〜] によってiframeに送信され、iframeオンロードを起動する応答を待ってから、次の送信をトリガーします。
この例に具体的に答える必要はありません。グローバル変数を回避する方法を考えることができない状況を参照するために提供しています。
最も簡単な方法は、コードをクロージャーでラップし、グローバルに必要な変数のみをグローバルスコープに手動で公開することです。
(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を回避することは不可能です。何かが常にグローバルスコープにぶら下がっています。名前空間を作成した場合でも、それは良い考えですが、その名前空間はグローバルになります。
ただし、グローバルな範囲を乱用しないための多くのアプローチがあります。最も簡単な方法の2つは、クロージャーを使用するか、追跡する必要がある変数が1つしかないため、関数自体のプロパティとして設定するだけです（変数は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) ...が必要な理由はわかりません。条件が常に真であるように見えるからです。しかし、変数へのグローバルアクセスが必要な場合は、上記で説明したfunction propertyメソッドを使用すると、変数が実際にグローバルでなくても実行できます。
_<iframe src="test.htm" name="postHere" id="postHere"
onload="startUpload.count++; if (startUpload.count > 1) startUpload();"></iframe>
_ただし、その場合は、おそらくオブジェクトリテラルまたはインスタンス化されたオブジェクトを使用し、通常のOOの方法でこれを実行する必要があります（モジュールパターンを使用したい場合） 。
JavaScriptでグローバル変数を使用することが理にかなっている場合があります。しかし、そのように窓から直接ぶら下げたままにしないでください。
代わりに、グローバルを含む単一の「名前空間」オブジェクトを作成します。ボーナスポイントについては、メソッドを含むすべてをそこに入れます。
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);
}
}
これを行う他の方法は、オブジェクトを作成してからメソッドを追加することです。
var object = {
a = 21,
b = 51
};
object.displayA = function() {
console.log(object.a);
};
object.displayB = function() {
console.log(object.b);
};
このようにして、オブジェクト「obj」のみが公開され、メソッドがそれにアタッチされます。名前空間に追加するのと同じです。
グローバルな名前空間には、いくつかのことが行われます。つまり、インラインJavaScriptコードから呼び出す関数です。
一般的に、解決策はすべてをクロージャーでラップすることです。
(function() {
var uploadCount = 0;
function startupload() { ... }
document.getElementById('postHere').onload = function() {
uploadCount ++;
if (uploadCount > 1) startUpload();
};
})();
インラインハンドラーを避けてください。
小規模から中規模のプロジェクトでは、クロージャーを使用しても問題ありません。ただし、大規模なプロジェクトの場合、コードをモジュールに分割して、異なるファイルに保存することをお勧めします。
したがって、問題を解決するために jQuery Secret plugin を作成しました。
このプラグインを使用した場合、コードは次のようになります。
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>
Firebug を開くと、グローバルもまったくなく、機能も見つかりません:)
完全なドキュメントについては、 こちら をご覧ください。
デモページについては、 this をご覧ください。
GitHubのソースコード 。
個々のグローバル変数を「確保」する場合：
function gInitUploadCount() {
var uploadCount = 0;
gGetUploadCount = function () {
return uploadCount;
}
gAddUploadCount= function () {
uploadCount +=1;
}
}
gInitUploadCount();
gAddUploadCount();
console.log("Upload counter = "+gGetUploadCount());私はJSの初心者で、現在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
})();