6

最初の本能は、次のような要素のjQueryセットにbindまたは単純なイベントメソッドを使用して、リスナーを追加することを教えてくれます..

$('.className').click(funcName);

$.each メソッドを使用してリスナーを 1 つずつ同じセットに追加するよりもはるかに適切です...

$('.className').each(function(){ $(this).click(funcName); });

しかし、プラグインの開発に関しては、ユーザーがプラグインのインスタンスをページの存続期間中、ページの読み込み時、およびページの読み込み後ずっと ajax を介して複数回呼び出す可能性に対処している場合、ハンドラーを適用するのは間違っていますか?ハンドラーをグローバルクラスセットに抽象化しようとするのではなく、各要素自体

私が扱っている主な質問は、「イベント処理に関して、呼び出されるプラグインの複数のインスタンスを処理する最善の方法は何ですか?作業負荷を軽減するには?」です。バインドとアンバインドができることはわかっていますが、もっと良い方法はありますか?

編集

プラグイン構造からの部分コード

init : function(){

  this.each(function(opts){

  // adding event handlers here removes
  // the need to worry about multiple instances
  // and duplicate handles over the lifetime of the page

  });

  // adding 'global' handlers here may/may not be more
  // efficient, but adds an issue of multiple instances

  return this;

}
4

4 に答える 4

4

click一度呼び出すと、jQuery はコレクション全体をループし、イベントを個別にバインドします。ただし、セット内の各要素に対して新しい jQuery オブジェクトを作成しないため、非常に遅くなるため、別の方法よりも効率的に実行できます。

jQueryソースのコードは次のとおりです（onメソッドです）：

return this.each( function() {
    jQuery.event.add( this, types, fn, data, selector );
});

(event.js、936-8行目)

jQuery.event.addこれは重い作業を行うメソッドであり、jQuery オブジェクトは必要ありません。プレーン DOM オブジェクトが必要です。$(this)コード内の大きなボトルネックが毎回呼び出されるため、このループ (実際にはあなたのループと同じことを行います) は効率の点ではるかに優れています。

最も効率的な手法は、同じメソッドでイベント委任を使用することonです。これは次のようになります。

$(document.body).on('click', '.className', funcName);

これは、「 内document.bodyでクリックするたびに、それが selector に一致する要素で発生したかどうかを確認し、.classNameそうであれば実行するfuncName」ことを意味します。すべての潜在的な要素document.bodyを含む他の要素に置き換えることができます。.className

于 2012-05-09T17:23:05.253 に答える
1 
$('.className').click(funcName);

単一のjqueryオブジェクトを使用するため、負荷が少なくなります

$('.className').each(function(){ $(this).click(funcName); });

初期インスタンスを使用するため、より多くの負荷がかかります。また、を介して「eached」要素ごとに新しいインスタンスが生成されます$(this)。50個の要素が含まれている場合$('.className')、単一のオブジェクトに対して、51個のjQueryオブジェクトがあります。

プラグインの開発に関しては、javascriptオブジェクトを使用newして、プラグインの各インスタンスに使用できます。または、親オブジェクトクラスを定義し、それを使用.eachしてインスタンスを設定することもできます。これがお役に立てば幸いです。あなたが何を料理しているのかを知らずに推薦するのは難しいです。

于 2012-05-09T17:10:34.473 に答える
1

あなたの質問は「効率」に関するもので、これは「クライアントの速度」を意味すると思います。おそらく、合理的なアプローチであれば、知覚されるパフォーマンスへの影響は最小限であるため、最も維持しやすいコーディング パターンを選択することをお勧めします。

于 2012-05-09T17:05:53.787 に答える
0

実際に知る唯一の方法は、プロファイルを作成することです。ただし、これは時期尚早の最適化の演習であることに賭けたいと思います。

$(this)ループ内での呼び出しによる実行時のパフォーマンスへの影響はごくわずかです。

eachハンドラーをループにアタッチする方が簡単でクリーンな場合は、それを実行してください。

于 2012-05-09T18:19:49.523 に答える