JSFiddle - React, Tailwind, and code Playground

by Eugene Kuzmenko

HTML

<script src="https://aljs.googlecode.com/git/Class.js"></script>

JavaScript

Class.define('A', {
  _public: {
    init: function () {
      console.log('constructor in A');
      this.parent();
    },
    a: function () {
      console.log('a in A');
    },
    b: function () {
      console.log('b in A');
    },
    c: 5
  },
  _protected: {
    p1: function () {
      console.log('p1 in A');
    },
    p2: function (message) {
      console.log(message);
    }
  },
  listeners: {
    someEvent: function () {
      console.log('someEvent fired in A');
    }
  }
});
Class.define('B', {
  extend: 'A',
  _public: {
    init: function () {
      console.log('constructor in B');
      this.parent();
    },
    a: function () {
      console.log('a in B');
    },
    b: function () {
      console.log('b in B');
      this.p1();
      this.p2();
      this.p3();
    },
    getTreasure: function () {
      this.hiddenTreasure();
    }
  },
  _protected: {
    p1: function () {
      console.log('p1 in B');
      // this.parent automatically sends the same arguments to the super method as were passed here, unless you override them
      this.parent();
    },
    p2: function () {
      console.log('p2 in B');
      this.callParent('p2', 'super class named method called');
    },
    p3: function () {
      console.log('p3 in B');
    }
  },
  _private: {
    hiddenTreasure: function () {
      console.log("you've found it!");
    }
  },
  listeners: {
    someEvent: function () {
      console.log('someEvent fired in B');
    },
    someOtherEvent: function () {
      console.log('someOtherEvent fired in B');
    }
  }
});
b = Class.create('B');
b.b();
b.getTreasure();
b.fire('someEvent');
b.on('someOtherEvent', function () {
  console.log('someOtherEvent fired in global scope');
  console.log(arguments);
});
b.fire('someOtherEvent', 'you', 'can', 'pass', 'data', 'to', 'the', 'listeners');
b.un('someEvent'); // remove all event listeners for the specified event, you can remove them all if you want, works similarly to...