使用 EcmaScript6 实现类似 mixin 的功能答案

【问题标题】：Implementing mixin like functionality with EcmaScript6使用 EcmaScript6 实现类似 mixin 的功能
【发布时间】：2019-02-28 03:18:13
【问题描述】：

从 Mootools 切换到 EcmaScript 类时，我需要向类添加一些预构建的功能。喜欢活动...

Mootools 为此在 Class 中使用 Implements 参数。

var Widget = new Class({
    Implements: Events,
    initialize: function(element){
        // ...
    },
    complete: function(){
        this.fireEvent('complete');
    }
});

在上面，Implements 向类添加了一些方法。

网上有很多 mixin 方法可以做到这一点。但最后我感到困惑。为什么我们不简单地扩展 Events 类，而是使用更复杂的 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
}

【问题讨论】：

你可以将它们 Object.assign 到原型上.. 例如.. Object.assign(Widget.prototype, Events)
How to add mixins to ES6 javascript classes?的可能重复
ES6 类提供了 extends 关键字来继承父类。但这仅限于 1 个扩展名。如果你想从多个来源继承，你将不得不为原型分配新的属性。

标签： javascript mootools mixins

【解决方案1】：

如果您正在寻找比混入事件更简单的解决方案，并且您正在使用 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);

（气泡和可取消定义事件如何通过 DOM 传播，除非您的事件侦听器调用了 preventDefault，否则结果将为“真”）

【讨论】：

寻找通用解决方案。不仅适用于活动。