JSFiddle - React, Tailwind, and code Playground

by Jonatan Nyqvist

HTML

<div class="console"></div>

CSS

.console {
    background-color: rgba(0,0,0,0.05);
    width: 100%;
    min-height: 16px;
    font-family: 'Monaco', 'Consolas';
    font-size: 12px;
    padding: 10px;
}

JavaScript

$('.console').append('Class simulation test:<br />');

// My class
MyClass = (function() {
    function innerClass() {
        
        var self = this;
        var myField;
        
        // This function works as the constructor
        this.init = function(opts) {
            // Arguments to the constructor
            var defaultOpts = {
                myInitArgument: null
            }
            opts = $.extend(defaultOpts, opts);
            self = this;
            
            // Any custom constructor code is generated here...
            self.myFunction('Hello from the constructor!');
        }
        
        // A function
        this.myFunction = function(value) {
            self = this;
            myField = value;
            $('.console').append('<br />Inside myFunction: ' + myField);
        }
        
        // Returns an object with all selected fields and function that should work as "public". Those not mentioned here, will not be visible outside this class.
        return {
            init: this.init,
            myFunction: this.myFunction,
            myField: myField,
        }
    }
    return innerClass;
})();

// instanciate
var myObject = new MyClass();
myObject.init({myInitArgument: 'test'});

// test
myObject.myFunction('Hello from the outside!');
$('.console').append('<br />Outside myFunction: ' + myObject.myField);