Реализация миксин-подобной функциональности с EcmaScript6 - PullRequest
Новая
       11

Реализация миксин-подобной функциональности с EcmaScript6

0 голосов
/ 24 сентября 2018

При переходе с Mootools на EcmaScript Classes мне нужно добавить некоторые готовые функции в классы.Подобные события ...

Mootools использует для этого параметр Реализует в классе.

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

Выше Реализует добавляет некоторые методы в класс.

Существует множество смешанных способов сделать это в сети.Но в конце я чувствую себя смущенным.Почему мы не просто расширяем класс Events, а используем более сложное смешанное приложение.

Я ищу что-то сухое и простое для повторного использования.Как этот; 

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 голосов
/ 25 сентября 2018

Если вы ищете более простое решение, чем миксины для событий, и вы работаете с элементами 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, и результат будет «истинным», если ваш слушатель события не вызвал предотвратитель предотвращения ошибок)

...