イベント プロキシをうまく利用し、クロージャのパフォーマンスの罠に注意してください。 _JavaScript スキル

つまり、クロージャは解放されたリソースを持たないスタック領域を作成します。つまり、イベントに関連付けられている場合、JS ガベージ コレクション メカニズムはこの領域には影響しません。
例: 淘宝網ストアの広告スペースのカスタマイズと同様に、div に数百のホット スポット (a タグ) を実装する必要があるプロジェクトがあります。次に、従来のアプローチに従って、次のような最も一般的なクロージャを作成します。インスタンスを使用する目的は、このスコープを変更し、そのハンドラー関数内でそのスコープに属する他のメソッドまたはプロパティを呼び出すことです。

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

var apply = function() {
this.div = document.getElementById("div の id");
this.hot = this.div.getElementsByTagName("a");
for(var i=0; i this.hot[i].onclick = function(me) {
return function() {
me.edit(this) }
}(this) ;
}
}
apply.prototype = {
Edit: function(target) {
}
}

ここでの問題は、 time このループは、上記で説明した制御不能なメモリ アドレスをメモリに書き込みます。もちろん、それが必要でなくなったときにそれを消去する方法はありません。js リサイクル メカニズムでは、それがいつ必要になるかがわかりません。使用すると役に立たず、ジャンクアドレスが生成されます。さらに、div 内の DOM 構造が変更された場合は、これらのタグを再度見つけてイベントをバインドする必要があります。
もちろん、これをローカル変数に追加することもできます: var me = this; 少なくともこれは、いつでもローカル変数 me を null に設定でき、JS ガベージ コレクション メカニズムがそれを認識します。この無駄なデータをいつクリーンアップするか。しかし、これは最善の解決策ではなく、多くの人がこの見苦しいコーディング方法を好まないと推定されます。
もちろん、最善の解決策は、内部構造を気にしたり、内部要素の変数を宣言したりする必要がないことです。その場合は、イベント プロキシの作業になります。イベント プロキシとは何ですか? つまり、イベントを各サブオブジェクトにバインドする必要はなく、バブリング メカニズムを通じて現在イベントをトリガーしている要素を見つけ、独自の一連のルールを通じて最終処理関数を見つけることができます。
イベント プロキシ パターンを使用する場合、上記の要件をどのように実装すればよいですか?次のように:

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

var apply = function() {
this.div = document.getElementById("div の ID");
this.div.onclick = function(me) {
return function() {
var _event = argument.callee. caller.arguments [0];
var target = _event.target || _event.srcElement;
if(target.tagName == "a")
me.edit(target);
return false;
}
}(this); >
ここで、コンテナ要素が何であるか、その中にある a の数、それらが変更されているかどうかなどは気にしません。性能の違いは明らかです。
何気なく書いたので少しわかりにくいですが、もし間違いがあればアドバイスをお願いします。

auntion / 2011-11-15
mail Auntion@gmail.com
QQ 82874972
元の記事、この部分の情報は転載用に残してください