JSFiddle - React, Tailwind, and code Playground

by Artem

JavaScript

'use strict';

function applyMixin(f, mixin) {
  for (let key in mixin) {
    f.prototype[key] = mixin[key];
  }
  return function() {
    return f.apply(this, arguments);
  };
}

const eventMixin = {
  on: function(eventName, eventHandler) {
    this.eventHandlers = {};
    let handlers = this.eventHandlers[eventName] = [];
    handlers.push(eventHandler);
  },
  off: function(eventName, eventHandler) {
    let handlers = this.eventHandlers[eventName];
    let index = handlers.indexOf(eventHandler);
    handlers.splice(index, 1);
  },
  trigger: function(eventName) {
    let handlers = this.eventHandlers[eventName];
    handlers.forEach(function(handler) {
      handler();
    });
  }
};



function dummyHandler() {
  console.log(`Hello from dummyHandler!`);
}

function otherDummyHandler() {
  console.log(`Hello from otherDummyHandler!`);
}

function Menu() {

}

Menu.prototype.choose = function() {
  this.trigger('select');
};

var NewMenu = applyMixin(Menu, eventMixin);


const newMenu = new Menu();

newMenu.on('select', dummyHandler);
newMenu.on('select', otherDummyHandler);

newMenu.choose();

newMenu.off('select', dummyHandler);

newMenu.choose();