view - バックボーンスタイル: ビューの el 要素を処理する方法

Question

いくつかのバックボーンの例で、同じことを行うさまざまな方法を見つけました

それらのいずれかが優れているかどうかを知りたいのですが、それらがまったく同じである場合、どちらがより受け入れられているスタイルですか

$('#header').html(new HeaderView().render());

対

new HeaderView({el:$('#header')).render();

と

this.$el.html( this.template() );

対

$(this.el).html( this.template() );

そして最後に

render: function() {
    [...]
    return this.el;
}

対

render: function() {
    [...]
    return this;
}

score 5 · Accepted Answer

コンストラクターで送信する方が常に可能であると思いますel。この方法では、JS ロジックが DOM 構造からより分離され、DOM 要素名が JS コードにハードコードされることはありません。

これは提案のテストにも適しているため、テストで本番 DOM 構造を再作成する必要がなく、ダミーの DOM 構造を作成し、ダミーの DOM 構造内の任意の DOM 要素を参照するビューをインスタンス化できます。

また、ビューはより再利用可能になります。

パフォーマンスの観点から、使用する方が良いと思います：

this.$el

VS

$(this.el)

最初のオプションはすでにプリコンパイルされているためです。jQuery は、単純な DOM 要素を jQuery DOM 要素に変換するリソースを消費します。これを使用する場合、this.$elこれは一度だけ行われます。

@muistooshort が言ったように、標準は returnthisです。通常、render()外部から必要なものだけを呼び出すとel、戻るelには多くのロジックがありますが、人々は戻ることに同意していthisます。

ある意味では、この表現がぎこちなく見えるため、論理があります。

$('#header').html(new HeaderView().render())

しかし、この他のものは非常に直感的で自己説明しているように見えます:

$('#header').html(new HeaderView().render().el)

view - バックボーン スタイル: ビューの el 要素を処理する方法