骨干风格：如何处理视图的el元素

Question

我在几个主干示例中找到了做同样事情的不同方法

我只是想知道它们中的任何一个是否更好，如果它们完全相同，那就是更容易接受的风格

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

VS

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

和

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

VS

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

并且最终

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

VS

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

Answer 1

发送或不发送构造函数中的el

我认为总是可以在构造函数中发送el更好，这样JS逻辑将更多地与DOM结构解耦而不是任何DOM元素名称都很难 - 编码成JS代码。

这对于测试建议也更好，因此您不需要在测试中重新创建生产DOM结构，并且可以创建虚拟DOM结构并实例化您的视图，从而引用任何DOM元素在你的虚拟DOM结构中。

此外，View变得更加可重用。

使用this.$el

我认为从性能的角度来看最好使用：

this.$el

VS

$(this.el)

由于第一个选项已经预编译。 jQuery使用资源转换jQuery DOM元素中的简单DOM元素，如果使用this.$el，则只执行一次。

在render()

中返回什么

正如@muistooshort所说，标准是返回this。通常情况下，当您致电render()时，您需要从外部el，因此返回el有很多逻辑，但人们同意返回this。

在某种程度上它有其逻辑，因为这个表达看起来很尴尬：

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

但另一个看起来非常直观且自我解释：

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