web-dev-qa-db-ja.com

$（this.el）.htmlとthis。$ el.htmlの違いは何ですか

次の違いは何ですか？

$(this.el).html

そして

this.$el.html

いくつかのバックボーンの例を読んで、ある人はある方法で、別の人は別の方法でそれを行います。

javascriptjquerybackbone.js
37
CLiown

$(this.el)は、jQuery（またはZepto）で要素をラップします。したがって、ビューHTMLが次の場合：

_<div id="myViewElement"></div>_

...そして_this.el_はそのdivを参照し、$(this.el)はjQueryを介して直接取得することと同等になります：$('#myViewElement')。

_this.$el_はjQuery（またはZepto）オブジェクトへのキャッシュされた参照であるため、$(this.el)の呼び出しから得られるもののコピーです。その目的は、$(this.el)を呼び出す必要性を節約することです。これにより、オーバーヘッドが発生し、パフォーマンスが低下する可能性があります。

注意：2つは同等ではありません。 _this.el_のみがHostオブジェクトHTMLElementへの参照であり、ライブラリは含まれません。これは_document.getElementById_の戻り値です。 $(this.el)は、jQuery/Zeptoオブジェクトの新しいインスタンスを作成します。 _this.$el_は、前のオブジェクトの単一のインスタンスを参照します。 $(this.el)への複数の呼び出しのコストを理解している限り、それらを使用することは「間違った」ことではありません。

コード内：

_this.ele = document.getElementById('myViewElement');
this.$ele = $('#myViewElement');

$('#myViewElement') == $(this.ele);
_

また、jQueryとZeptoには部分的な内部キャッシュがあるため、$(this.el)mightへの追加の呼び出しはキャッシュされた結果を返すことになり、それが理由です「パフォーマンスに懸念があるかもしれません」と言います。また、そうでない場合もあります。

ドキュメント

54
Chris Baker

2つはessentially*と同等であり、_$el_はjQueryまたはZeptoオブジェクトの キャッシュバージョン ですel、$(this.el)を使用して例を見る理由は、backbone.js（0.9.0）の後の release でのみ追加されたためです。

*技術的には Chris Baker が指摘するように、$(this.el)は（おそらく）それを呼び出すたびに新しいjQuery/Zeptoオブジェクトを作成し、_this.$el_は毎回同じものを参照します。

6
Jack

_$el_がthisに存在し、jQueryオブジェクトである場合、$(this.el)を使用しないでください。既に存在する場合、新しいjQueryオブジェクトを初期化するためです。

2
Kevin B

それらはまったく同じものをもたらします。つまり、ビューの要素への参照です。 $ elは、単に$（this.el）のjqueryラッパーです。このリファレンスをご覧ください： http://documentcloud.github.com/backbone/#View- $ el

2
Brendan Delumpa

私は通常これを見ます：

var markup = $(this).html();
$(this).html('<strong>whoo hoo</strong>');

ラミノに同意します。あなたが見たあなたの例は間違っているように見えます。

このコードは通常、each（）などのjqueryループまたはイベントハンドラー内で見られます。ループ内では、「el」変数はjQueryオブジェクトではなく、純粋な要素を指します。同じことがイベントハンドラ内の「this」にも当てはまります。

次のように表示される場合：$（el）または$（this）、作成者はdomオブジェクトへのjQuery参照を取得しています。

以下は、数字をローマ数字に変換するために使用した例です（注：私は常に$ではなくjQueryを使用しています-mootoolsとの衝突が多すぎます...）

jQuery(document).ready(function(){
    jQuery('.rom_num').each(function(idx,el){
        var span = jQuery(el);
        span.html(toRoman(span.text()));
    });
});
1
Perry Tew

$（）で要素をラップすると、jQuery拡張がオブジェクトプロトタイプに追加されます。一度実行すれば、再度実行する必要はありませんが、複数回実行してもパフォーマンス以外に害はありません。

0
Matt S