Javascript 使用ECMAScript 6实现类似mixin的功能

Javascript 使用ECMAScript 6实现类似mixin的功能,javascript,mootools,mixins,Javascript,Mootools,Mixins,在从Mootools切换到EcmaScript类时,我需要向类添加一些预构建的功能。像事件 Mootools为此在类中使用Implements参数 var Widget = new Class({ Implements: Events, initialize: function(element){ // ... }, complete: function(){ this.fireEvent('complete'); } })

在从Mootools切换到EcmaScript类时,我需要向类添加一些预构建的功能。像事件

Mootools为此在类中使用Implements参数

var Widget = new Class({
    Implements: Events,
    initialize: function(element){
        // ...
    },
    complete: function(){
        this.fireEvent('complete');
    }
});
上面,实现向类添加了一些方法

在网上有很多这样做的方法。但最后我感到困惑。为什么我们不简单地扩展事件类,而是使用更复杂的mixin应用程序

我正在寻找一些干燥和简单的重复使用。像这个,

class BaseAnimal {
  //...
}


/* Events Mixin */
var Events={
   //...
}

/* Options Mixin */
var Options={
   //...
}

/* Extend base and add mixins */
class Parrot extends myMixinFuction(BaseAnimal,Events,Options){
   //...
}

/* No Base. Only add mixin */
 class Cat extends myMixinFuction(Events){
   //...
}

myMixinFuction function (...args){
  //do something that adds mixins to base class.
  //if no base create one empty class and add mixinis to it
  //return that Class
}

如果你正在寻找比MIXIN更简单的事件解决方案,并且你正在使用DOM元素,那么你可以考虑只烧原生DOM事件

附加事件侦听器的步骤

element.addEventListener("my:event", evt => myEventHandler(evt));
而不是fireEvent

let evt = element.ownerDocument.createEvent('my:event');
evt.initEvent(eventtype, bubbles, cancelable);
evt.detail = detail;
let result = element.dispatchEvent(evt);

(气泡和cancelable定义了事件如何通过DOM传播,除非您的事件侦听器调用了preventDefault,否则结果将为“true”)

您可以直接将它们分配到原型上。。例如
Object.assign(Widget.prototype,Events)
ES6类的可能副本为您提供了从父类继承的extends关键字。但这仅限于1个扩展。如果你想从多个源继承,你就必须为原型分配新的属性。寻找一个通用的解决方案。不仅仅是活动。