使用EcmaScript6实现类似mixin的功能

时间:2018-09-24 15:04:20

标签: javascript mootools mixins

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

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

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

上面,实现为类添加了一些方法。

网上有很多混合方法可以做到这一点。但是最后我感到困惑。为什么我们不只是扩展一个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
}

1 个答案:

答案 0 :(得分:0)

如果您正在寻找比Event,的mixins更简单的解决方案,并且正在使用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,否则结果将为“ true”