view - 主干样式 : how to deal with the el element of a view

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;
}

Answer 1

发送或不发送，el在构造函数中

我认为总是最好发送el在构造函数中，这样 JS 逻辑将与 DOM 结构更加解耦，并且没有任何 DOM 元素名称被硬编码到 JS 代码中。

这对于测试建议也更好，因此您无需在测试中重新创建生产 DOM 结构，您可以创建一个虚拟 DOM 结构并实例化您的 View ，以引用虚拟 DOM 结构中的任何 DOM 元素。

View 也变得更加可重用。

使用 this.$el
我认为从性能的角度来看最好使用:

this.$el

VS

$(this.el)

由于第一个选项已经预编译。 jQuery 消耗资源，将简单的 DOM 元素转换为 jQuery DOM 元素，如果您使用 this.$el这仅进行一次。

在 render() 中返回什么

正如@muistooshort 所说，标准是返回 this .通常当您调用 render() 时你只需要从外面得到 el所以返回 el有很多逻辑但人们同意返回 this .

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

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

但是这个其他看起来非常直观和自我解释:

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