骨干视图优化答案

【问题标题】：Backbone view optimization骨干视图优化
【发布时间】：2015-08-22 14:01:14
【问题描述】：

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

我有这 2 个视图。写完之后，我很困惑我是否走在正确的道路上。我怀疑的原因是代码看起来几乎相同，除了呈现视图的 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;
    }
});

【问题讨论】：

标签： javascript performance backbone.js

【解决方案1】：

首先你最好在树初始化的第一个元素处提供el 值，否则所有视图都会尝试使用相同的 DOM 元素：

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

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

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

最后回答你的问题，不这样它不会影响性能。您只需要在父视图中跟踪叶子视图并使用父视图将它们删除，这是避免内存泄漏所必需的。以下是清理示例（使用 this.subViews 数组收集的所有叶视图并在父级删除时删除）：

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

【讨论】：