jQueryのイベントハンドラ - メモリ使用量

Question

私はこれを行ってきた：

$('#id').on('click',function(e){myFunction(var1,var2);}); 

function myFunction(x,y){blah blah blah} 

私はこれを変更したいんだ：私は別のDOM要素の多くでこれを行う場合は

$('#id').on('click',function(e){blah blah blah}); 

、 myFunctionで占められるスペースに各クロージャを掛け合わせるので、私はより多くのメモリスペースを消費しますか？それとも、ポインタを使うだけですか？

Answer 1

最初のコードには再利用の利点がありますが、実際の関数を呼び出すために匿名関数を定義するという欠点があります。それが本当に重要な場合、余分な機能はオーバーヘッドです。

1つだけの関数を渡しているので、2番目のメモリのメモリ消費量ははるかに少なくなります。関数も参照渡しされます。この機能は、一度格納され、多くの異なる呼び出し元によって呼び出されることを意味します。

---

ただし、添付する方法もパフォーマンスに影響します。あなたはこのようにそれを行う場合：

$('#id1').on('click',function(e){myFunction(var1,var2);}); 
$('#id2').on('click',function(e){myFunction(var1,var2);}); 

この1つはjQueryの4倍（2 $()と2 on()）を呼び出し、2つの無名関数を作成し、二回外部関数を呼び出します。 count：6つの呼び出し、操作を実行するための3つの関数（内部のjQuery呼び出しを除く）

$('#id1').on('click',function(e){blah blah blah}); 
$('#id2').on('click',function(e){blah blah blah}); 

あなたはこのようにそれを行う場合、関数はもはや再利用可能ではありませんが、あなたはjQueryの4つの呼び出し、2つの機能を持っていますが、コードを繰り返しています。 DRYの観点からは良くない。

$('#id1, #id2').on('click',function(e){blah blah blah}); 

これは、2つのコールと1つの機能を持っています。これは良いです。

$('#id1, #id2').on('click',function(e){myFunction(var1,var2);}); 

あなたも、このようにそれを行うことができ、機能が追加匿名関数とコールの犠牲と再利用可能です。カウント：3コール、2ファンクション。

---

バブルが非常に遠くまで移動しないように、あなたは「最も近い共通の親」、最寄りのハンドラを取り付けて.onのパワーを活用できます。これと比較してlive()はイベントをdocumentにアタッチし、ハンドラを新しい要素に対しても使用可能にします。しかし、documentに接続すると、深くネストされた要素のために非常に遠くになります。

$('nearest_common_parent').on('click','dynamic_element',function(){ 
    //do stuff 
}); 

Answer 2

私はあなたの2番目の方法は慣例によって正しいと考えています。特に、第一とするので、あなたは$(this)

へのアクセスを失うあなたはVARとして

$('#test').on('click', function(e) {myFunction($(this), e, other_vars)}); 

それを渡す必要があるだろうVS

$('test').on('click', function(e) { 
    e.preventDefault(); 
    var $this = $(this); 
    //yadda yadda 
}); 

それは本当に、あなたのコードをより読みやすくなります。私は実際の質問に答えていないことを知っていますが、私はこれらがあなたの機能を正しく書くためのいくつかの正当な理由だと思います。

Answer 3

主にIDを使用する場合、Josephの回答は優れた説明です。しかし、セレクタのクラス名やタグ名の場合は、on関数のselectorパラメータを利用する方がよいでしょう。例：

$('#page-wrap').on('hover', 'a', function() { 
    // do something 
    }); 

だけが#page-wrap要素への結合を作成しますが、その中の任意のa要素に発射されます。メモリ使用量とセットアップ速度の点では優れています。特に、多くの要素にバインドしている場合は特にそうです。