JSFiddle - React, Tailwind, and code Playground

by Deepak Anand

HTML

<div id="output"></div>

JavaScript

// Dojo declare multiple inheritance

require([
  "dojo/_base/declare"
], function(declare) {

  var output = document.getElementById('output')
  var buffer = ''
  var log = function(msg) {
    output.innerHTML = (buffer += msg + '<br>');
  }

  // Dojo declared "classes"
  var SuperClass = declare(null, {
    constructor: function() {
      log('In SuperClass constructor')
    },
    doFoo: function() {
      log('in SuperClass doFoo')
    }
  })

  var Mixin = declare(null, {

    constructor: function() {
      log('In Mixin constructor')
    },
    doFoo: function() {      
      log('In Mixin doFoo')
    }

  })

  var SubClass = declare([SuperClass, Mixin], {
    constructor: function() {
      // super() call is not needed, it is implied      
      log('In SubClass constructor')
    },

    doFoo: function() {
      this.inherited(arguments)
      log('in SubClass doFoo')
    }
  })

  log('constructor functions are called in the order: SuperClass -> Mixin -> SubClass')
  log('')
  var subclassInstance = new SubClass()
  
  log('')
  log('Why is mixin method called first ?')
  log('')
  subclassInstance.doFoo()

});