javascript自己実行関数の擬似名前空間カプセル化方法_javascriptスキル

自己実行関数: 自動的に実行される関数。解釈された時点ではすでに実行されています。通常、関数は呼び出されたときに実行されます。
自己実行関数の一般的な形式: (function() { function body })();
さらに、自己実行関数には通常、function() {} の形式の匿名関数があります。

次のコードは、window オブジェクト内に名前空間 mySpace を作成し、mySpace 名前空間の下の自己実行関数内のメソッドをカプセル化して、この自己実行関数内のいくつかの関数を呼び出せるようにします。

コードをコピー コードは次のとおりです。

(function() {
/ /id に従ってオブジェクトを取得します
function $(id) { return document.getElementById(id) }

//内部関数は外層で呼び出すことはできません
function _setStyle(id, styleName, styleValue) {
$(id).style[styleName] = styleValue;

// 疑似名前空間を作成します
window.mySpace = {}; 🎜>// 内部関数 _setStyle を mySpace 名前空間にカプセル化します
// 呼び出すときは、window.mySpace.setStyle(id, styleName, styleValue) を使用します
window.mySpace.setStyle = _setStyle; () ;

//以下はテストコードです
window.onload = function() {
//ID test を持つオブジェクトのテキストの色を赤に設定します
window. mySpace.setStyle( "test", "color", "#f00");
}


では、このパッケージ化方法にはどのような利点があるのでしょうか?

もちろん、自己実行関数内のメソッド、変数、属性などは保護されます。これにより、コードの安全性が高まります。

この方法を使用しない場合は、次の方法も実装できます。




コードをコピーします

コードは次のとおりです。 window.mySpace = {}; >window.mySpace.$ = function(id) { return document.getElementById(id); } window.mySpace.setStyle = function(id, styleName, styleValue) {

window.mySpace.$("test ").style[styleName] = styleValue;

}
//以下はテストコードです
window.onload = function() {
window.mySpace.setStyle("test", " backgroundColor", "# f00");
window.mySpace.setStyle("test", "color", "#fff");
}


上記のコードと自己実行関数によって実装される関数 実際には同じです。

比較すると、2 番目の方法の方が直感的で理解しやすいことがわかります。ただし、カプセル化プロセスがなければ、コードは完全に公開されます。