JSFiddle - React, Tailwind, and code Playground

by pellepim

HTML

<html>
    <head></head>
    <body>
        <h2>Parasitic inheritence pattern supporting calls to "super class".</h2>
        <div id="results"></div>
    </body>
</html>

CSS

h2 {
    font-family: sans-serif;
    font-size: 15px;
    margin: 10px; 0;
}

div#results {
    font-family: monospace;
    border: 1px solid #eee;   
}

div#results p {
    margin: 10px;
}

JavaScript

/**
 * Alternative classical inheritence scenario, without prototyping
 */

var ROOT = {};

/**
 * This is the base function for Parasitic Inheritence
 */
ROOT.Inheritable = function () {
    var self = {
        /**
         * takes the name of a function that should exist on "self", and
         * rewires it so that it executes both the original function, and the method
         * supplied as second parameter.
         */
        extend : function (functionName, func) {
            if (self.hasOwnProperty(functionName)) {
                var superFunction = self[functionName];
                self[functionName] = function () {
                    superFunction();
                    func();
                };
            }
        },
        
        /**
         * Takes the name of a function and reassigns it to the function supplied
         * as second parameter.
         */
        replace : function (methodName, func) {
            self[methodName] = func;
        } 
    };
    return self;
};

/**
 * Inherits from PP.Inheritable
 */
ROOT.Action = function () {
    var self = ROOT.Inheritable();
    /**
     * I intend to extend this method in an inheriting object
     */
    self.methodToExtend = function () {
        $("#results").append("<p>I should be seen first, since I get extended</p>");  
    };
    /**
     * I intend to replace this method in an inheriting object
     */
    self.methodToReplace = function () {
        $("#results").append("<p>I should never be seen, since I get replaced.</p>");
    };
    return self;
};

/**
 * Inherits from Action.
 */
ROOT.Task = function () {
    var self = ROOT.Action();
   
    self.extend('methodToExtend', function () {
       $("#results").append("<p>I successfully ran the extended code too.</p>");
    });
    
    self.replace('methodToReplace', function () {
        $("#results").append("<p>I successfully replaced the \"super\" method.</p>");
    });
    
    return self;
};

var task =...