view - Backbone style：如何处理视图的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 所说，标准是 return this。通常当你render()从外面调用你只需要的东西时el，返回el有很多逻辑，但人们已经同意返回this。

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

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

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

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

1 回答 1