inheritance - Backbone.js View 继承

Question

我有一个名为 Pannel 的 View ，它只是一个带有关闭按钮的背景。我想将该 View 扩展到名为 PannelAdvanced 的 View 。我该如何使用backbone.js 做到这一点？

现在所有示例都有 Backbone.View.Extend 但那些只是扩展 Backbone.View；我想扩展我的 PannelView。

Answer 1

继承 View 的最简单方法是执行其他人在评论中已经建议的操作:

var Pannel = Backbone.View.extend({
});

var PannelAdvanced = Pannel.extend({
});

但是就像您在评论中指出的那样，如果您在 Pannel 中有一个初始化方法，那么如果您在 PannelAdvanced 中也有一个初始化方法，则不会调用它，因此您必须显式调用 Pannel 的初始化方法:

var Pannel = Backbone.View.extend({
   initialize: function(options){
      console.log('Pannel initialized');
      this.foo = 'bar';
   }
});

var PannelAdvanced = Pannel.extend({
   initialize: function(options){
      Pannel.prototype.initialize.apply(this, [options])
      console.log('PannelAdvanced initialized');
      console.log(this.foo); // Log: bar
   }
});

这有点难看，因为如果您有很多继承自 Pannel 的 View ，那么您必须记住从所有 View 中调用 Pannel 的初始化。更糟糕的是，如果 Pannel 现在没有初始化方法，但您选择在将来添加它，那么您将来需要转到所有继承的类并确保它们调用 Pannel 的初始化。因此，这里有一种定义 Pannel 的替代方法，这样您继承的 View 就不需要调用 Pannel 的初始化方法:

var Pannel = function (options) {

    // put all of Panel's initialization code here
    console.log('Pannel initialized');
    this.foo = 'bar';

    Backbone.View.apply(this, [options]);
};

_.extend(Pannel.prototype, Backbone.View.prototype, {

    // put all of Panel's methods here. For example:
    sayHi: function () {
        console.log('hello from Pannel');
    }
});

Pannel.extend = Backbone.View.extend;


// other classes inherit from Panel like this:
var PannelAdvanced = Pannel.extend({

    initialize: function (options) {
        console.log('PannelAdvanced initialized');
        console.log(this.foo);
    }
});

var pannelAdvanced = new PannelAdvanced(); //Log: Pannel initialized, PannelAdvanced initialized, bar
pannelAdvanced.sayHi(); // Log: hello from Pannel