JSFiddle - React, Tailwind, and code Playground

by arzo

HTML

<script src="https://raw.githubusercontent.com/devinrhode2/extendFunction.js/master/extendFunction.js"></script>
<select id="msgs" multiple width=100 />

JavaScript

"use strict";
//BEGIN just for jsfiddle demonstration
var log = function(msg) {
    var list=document.getElementById('msgs');
    var entry=document.createElement('option');
    entry.innerHTML=msg;
    list.appendChild(entry);
}
extendFunction('console.log', log);
extendFunction('console.info', log);
extendFunction('console.error', log);
console.log('init ok');
//END jfjd

var MyObj = function () {
    this.name='object';
    this.toString = function() {return this.name;};
    this.extend = function(objectToBeMerged) {
        var objs=[this._this, this, objectToBeMerged],
            newobj={},
            obj;
        for(var i in objs) {
                for(var k in (obj=objs[i]) ) if (obj.hasOwnProperty(k)) newobj[k]=obj[k];
        }
        return newobj;
    };
    /**
    *  Remember that extending to new class requires calling this constructor as a function. 
    *  Bad: 
    *    var NewClass = OldClass.extendClass({name: '2nd name'});
    *  Good: 
    *    var NewClass = new OldClass.extendClass({name: '2nd name'})();
    */
}
/**
Note that this method may be executed only on class. 
*/
MyObj.extendClass = function(_newprops) {
    var parentClass = this, 
        newprops = _newprops,
        _this = this;
    //console.log('parentClass',this===MyObj);
    var newClass = function () {
        for(var k in _this) { if(0) console.log('copy',k); if (_this.hasOwnProperty(k)) {this[k]=_this[k];}}
        parentClass.call(this);
        for(var k in newprops) if (newprops.hasOwnProperty(k)) {if(0) delete this[k]; this[k]=newprops[k];}
    };
    newClass.extendClass = MyObj.extendClass;
    return newClass;
};

var Action = MyObj.extendClass({name: 'action abstract object', exec: 'implemtation', undo: 'implementation of opposite action here'});

    var action = new Action();
    console.log('action',Action,action);
if(1){
    var DragNDrop = action.extend({name: 'drag&drop action', self:this, exec: function(){console.log('did d&d');}})
   ...