骨干风格:如何处理视图的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)