Javascript “我怎么能？”；“深度延伸”；或；“模块化扩展”；主干/木偶课程？

在木偶中，我们有一个“主视图”，我们想扩展它

var PaginatedDropdown = Marionette.CompositeView.extend({
  template: template,
  events: {
    'click': function () { return 'hello';},
    'keyup': function () { return 'goodbye'}
  },
  childViewOptions: {
     tagName: 'li'
  }
});

理想的用例是通过更具体的视图来扩展该视图或类，这些视图将实现主类/视图的大多数特性，并修改一些特性：

var MotorcycleColorChooserDropdown = PaginatedDropdown.extend({
    events: {
      'mouseenter': function () { return 'vroom'; };
    }
});

问题是我们不确定如何有选择地修改事件哈希之类的内容，或者覆盖某些子视图选项。具体而言：

如果

MotorcycleColorChooserDropdown

有一个

events

对象，它将覆盖

PaginatedDropdown

正在侦听的所有事件。我们如何混搭？（允许在

MotorcycleColorChooserDropdown

上有一个与

PaginatedDropdown

的事件对象相结合的事件对象吗

可能无法解决：如果我们想要

PaginatedDropdown

click

事件的所有功能，但我们还想在

MotorcycleColorChooser下拉列表中添加一点，该怎么办？我们是否只需要手动将父类的所有功能粘贴到子类中

---

我们只考虑过不做这样的扩展视图，或者做类似于

MotorcycleColorChooserDropdown=PaginatedDropdown.extend（）；

的事情，然后一次做一个

MotorcycleColorChooserDropdown.events=PaginatedDropdown.events.extend（{…}）

但这看起来很混乱，很难看，我相信还有更好的办法。

以下是我一直在做的事情

var PaginatedDropdown = Marionette.CompositeView.extend({
  template: template,
  events: {
    'click': 'onClick',
    'keyup': function () { return 'goodbye'}
  },
  onClick:function(e){
      return 'hello'
  },
  childViewOptions: {
     tagName: 'li'
  }
});

var MotorcycleColorChooserDropdown = PaginatedDropdown.extend({
    events: _.extend({
      'click': 'onClick',
      'mouseenter': function () { return 'vroom'; };
    },PaginatedDropdown.prototype.events),
    onClick:function(e){
        PaginatedDropdown.prototype.onClick.call(this,e)
        //code
    }
});

对于您的第一个问题，我只是用父

事件扩展子
事件

至于第二个，我只是从子对象调用父方法，传入子上下文和事件对象

它非常冗长，但也非常明确。阅读您的代码的人将确切地知道发生了什么。
以下是我一直在做的事情

var PaginatedDropdown = Marionette.CompositeView.extend({
  template: template,
  events: {
    'click': 'onClick',
    'keyup': function () { return 'goodbye'}
  },
  onClick:function(e){
      return 'hello'
  },
  childViewOptions: {
     tagName: 'li'
  }
});

var MotorcycleColorChooserDropdown = PaginatedDropdown.extend({
    events: _.extend({
      'click': 'onClick',
      'mouseenter': function () { return 'vroom'; };
    },PaginatedDropdown.prototype.events),
    onClick:function(e){
        PaginatedDropdown.prototype.onClick.call(this,e)
        //code
    }
});

对于您的第一个问题，我只是用父
事件扩展子
事件

至于第二个，我只是从子对象调用父方法，传入子上下文和事件对象

它非常冗长，但也非常明确。阅读您的代码的人将确切知道发生了什么。
您可以：

var PaginatedDropdown = Marionette.CompositeView.extend({
   template: template,
   childViewOptions: {
     tagName: 'li'
   },
   "events": function() {
     'click': 'onClick',
     'keyup': 'onKeyUp'
   },
   "onClick": function() {
      return 'hello';
   },
   "onKeyUp": function() {
      return 'hello';
   },
}); 

var MotorcycleColorChooserDropdown = PaginatedDropdown.extend({
    "events" : function() {
      //Question: 
      //Basically extending the first events by using the marionette event function and extending it.
      var parentEvents = PaginatedDropdown.prototype.events,
          events = _.extend({}, parentEvents);

      events['mouseenter'] = this.onMouseEnter;
      //add all of the events of the child
      return events;
    }
    "onMouseEnter": function() {
      return 'vroom';
    },
    "onClick": function() {
       //Question 2: 
       //Applying the parent's method
       PaginatedDropdown.prototype.onClick.apply(this, arguments);

       //and adding new code here
   }
});

你可以：

var PaginatedDropdown = Marionette.CompositeView.extend({
   template: template,
   childViewOptions: {
     tagName: 'li'
   },
   "events": function() {
     'click': 'onClick',
     'keyup': 'onKeyUp'
   },
   "onClick": function() {
      return 'hello';
   },
   "onKeyUp": function() {
      return 'hello';
   },
}); 

var MotorcycleColorChooserDropdown = PaginatedDropdown.extend({
    "events" : function() {
      //Question: 
      //Basically extending the first events by using the marionette event function and extending it.
      var parentEvents = PaginatedDropdown.prototype.events,
          events = _.extend({}, parentEvents);

      events['mouseenter'] = this.onMouseEnter;
      //add all of the events of the child
      return events;
    }
    "onMouseEnter": function() {
      return 'vroom';
    },
    "onClick": function() {
       //Question 2: 
       //Applying the parent's method
       PaginatedDropdown.prototype.onClick.apply(this, arguments);

       //and adding new code here
   }
});

我在关于的回答中解释了所有这些。我在关于的回答中解释了所有这些。你是对的，除了
…events.extend（{…}）不存在的
。
extend
函数来自主干网，不适用于每个对象。你是对的，我查看了代码的意图而不是其正确性，将编辑我的答案。你是对的，除了
…events.extend（{…}）
不存在。
extend
函数来自主干，不适用于所有对象。你说得对，我查看了代码的意图，而不是它的正确性，将编辑我的答案。