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

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

WBOY

リリース： 2016-05-16 18:11:24

オリジナル

1259 人が閲覧しました

つまり、クロージャは解放されたリソースを持たないスタック領域を作成します。つまり、イベントに関連付けられている場合、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 
元の記事、この部分の情報は転載用に残してください