複数 - jquery 属性 追加




jQuery $(this)と変数 (5)

与えられた:

var element = $('#element');

どちらが速いのかと思います。

element.click(function(){
    element.dosomething()
)}

または

element.click(function(){
    $(this).dosomething()
)}

それとも重要ですか?


$(this)は関数呼び出しを引き起こすので、最初の例は理論的には高速ですが、おそらくそれほどではありません。


jQueryにはdom要素の独自のキャッシュ(既にjqueryによって一度触れられています)があるので、実際にはほとんどの場合これで大きな違いはありません。

私は本当にこれがあなたのケースであるとは思わない、jqueryは実際には要素であるthisをラップするので、あなたは本当に二度どんな種類のクエリも実行していない。

ところで 、いくつかのケースではこれは違いを生む(例えば委任するとき)。


これはもっと速いでしょう:

element.click(function(){
    element.dosomething();
)}

これは最も速いでしょう:

element.bind('click', element.dosomething);
  1. 要素はキャッシュされます(そして変更されません、私は仮定します)
  2. bind( 'click')を直接使う.click()ラッパーを使わない
  3. element.dosomethingが呼び出したい関数の場合は、追加呼び出しなしで直接渡します。

私はelement.dosomething()が正しいこと、またelementが変わらないことを仮定しています。

これが実用的なコードの例です: http://jsfiddle.net/xhS3b/ : http://jsfiddle.net/xhS3b/

//<a href="#" id="element">click me</a>

var element = $('#element');
element.dosomething = function () {
    alert('did something');   
    return false;
}
element.bind('click', element.dosomething);

最初のほうが速いです。 2番目は同じセレクタを2回実行します。 それは言った、あなたは最初の方法を使用して一度だけそのコードを使用するだろう、それはおそらくあなたがほとんどの時間欲しいものではありません。

実際には、次のようなパターンを使用してください。

$('stuff').click(function(){
    var $$ = $(this); 
    $$.dosomething();
    $$.dosomethingelse();
)}

つまり、セレクタを1回だけ使用しない限り、最初にセレクタを変数に割り当てます。


速度はおそらく同じですが、要素を別のものに再割り当てすること(または要素の値が完全に失われること)を心配する必要がないため、$(this)を使用する方がはるかに優れています。

また、特定の要素の代わりにクラスのリファクタリングをしてクラスのセレクタを使用すると、関数は一致したすべての要素ではなく、すべての要素に対して機能します。





performance