JSFiddle - React, Tailwind, and code Playground

by JAAulde

JavaScript

( function( global )
{
    var jaa = global.jaa = ( global.jaa || {} );

    jaa.Foo = function(){};

    jaa.WidgetBase = {
        options: {},
        foo: null,
        _create: function()
        {
            if( typeof this.options.foo !== 'undefined' && this.options.foo instanceof jaa.Foo )
            {
                this._setFoo( this.options.foo );
            }
        },
        _setFoo: function( foo )
        {
            this.foo = foo;
        }
    };

    $.widget(
        'jaa.widget1',
        $.extend(
            {},
            jaa.WidgetBase,
            {
                _create: function()
                {
                    var w = this;

                    alert( 'w.foo' );
                    alert( w.foo );
                    jaa.WidgetBase._create.apply( w, arguments );
                    alert( 'w.foo' );
                    alert( w.foo );
                    w
                      .element
                        .click( function()
                        {
                          var params;

                          ( params = Array.prototype.slice.call( arguments ) ).push( w );

                          w._elementClicked.apply( this, params );
                        } );
                },
                _elementClicked: function( e, w )
                {
                    alert( 'w.foo' );
                    alert( w.foo );
                }
            }
        )
    );

    $.widget(
        'jaa.widget2',
        $.extend(
            {},
            jaa.WidgetBase,
            {
                prop2: true,
                _create: function()
                {
                    jaa.WidgetBase._create.apply( this, arguments );
                }
            }
        )
    );
}( window ) );

var f = new jaa.Foo();
$( '<div>Click Me</div>' ).appendTo( 'body' ).widget1( { foo: f } );