Javascript 主干视图优化

我在我的项目中使用主干js，我对视图有点困惑

我有这两种观点。写完之后，我感到困惑，不知自己是否走上了正确的道路。我怀疑的原因是代码看起来几乎相同，除了呈现视图的el和视图中使用的模板

这种类型的代码会影响性能吗？？我可以优化它吗

代码：

Project.views.list = Backbone.View.extend({
    // The DOM Element associated with this view
    el: '.lists-section-content',
    itemView: function(x){
        return new Project.views.list(x);
    },
    // View constructor
    initialize: function(payload) {
        this.data = payload.data;
        this.colStr = payload.colStr;
        this.render();
    },
    events: {

    },
    render: function() {
        sb.renderXTemplate(this);
        return this;
    }
});

---

首先，最好在树初始化的第一个元素中提供

el

值，否则所有视图将尝试使用相同的DOM元素：

在此之后，您需要稍微修改初始化函数以利用：

最后回答你的问题，不，这样做不会影响性能。您只需要跟踪父视图中的叶视图，并将它们与父视图一起删除，这是为了避免内存泄漏。以下是清理示例（使用

this.subViews

array收集的所有叶视图，在删除父视图时删除）：

var myTreeRoot= new Project.views.list({
  el: '.lists-section-content',
  data: payload.data,
  colStr: payload.colStr
});

// View constructor
initialize: function(options) {
    this.data = options.data;
    this.colStr = options.colStr;
    this.render();
},

Project.views.list = Backbone.View.extend({
    // The DOM Element associated with this view
    itemView: function(x){
        var view = new Project.views.list(x)
        this.subViews.push(view)
        this.$('.item-container:first').append(view.el)
    },
    remove: function() {
        _.invoke(this.subViews, 'remove')
        return Backbone.View.prototype.remove.apply(this, arguments)
    },
    // View constructor
    initialize: function(options) {
        this.data = options.data;
        this.subViews = [];
        this.colStr = options.colStr;
        this.render();
    },
    render: function() {
        sb.renderXTemplate(this);
        return this;
    }
});