2

私はこれをやっています：

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

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

私はこれに変更したいと思います：

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

多くの異なるDOM要素を使用してこれを行う場合、myFunctionが占めるスペースをクロージャーごとに乗算するため、より多くのメモリスペースを消費しますか？それとも、ポインタを使用するだけですか？

4

3 に答える 3

2

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

2つ目は、1つの関数のみを渡すため、メモリの使用量が大幅に少なくなります。関数も参照によって渡されます。つまり、この関数は一度保存すれば、さまざまな呼び出し元から呼び出すことができます。

ただし、取り付け方法もパフォーマンスに影響します。あなたがこのようにそれをするならば：

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

これはjQueryを4回（2$()と2 on()）呼び出し、2つの無名関数を作成し、外部関数を2回呼び出します。カウント：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
});
于 2012-05-05T02:36:01.770 に答える
1

私はあなたの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
});

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

于 2012-05-05T02:36:28.663 に答える
1

ジョセフの答えは、主にIDを使用する場合の優れた説明です。ただし、セレクターのクラスまたはタグ名の場合は、 on関数のselectorパラメーターを活用することをお勧めします。例：

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

これにより、要素へのバインディングは1つ#page-wrapだけ作成されますが、その中のすべてのa要素に対して実行されます。特に多くの要素にバインドしている場合は、メモリ使用量とセットアップ速度の点で優れています。

于 2012-05-05T02:50:29.370 に答える