JSFiddle - React, Tailwind, and code Playground

by Osman Salihovic

HTML

<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<div id="id1">DIV 1</div>
<div id="id2">DIV 2</div>

JavaScript

(function($) {
  $.namespace = function(namespaceName, closures) {

    if ($.fn[namespaceName] === undefined) {
      $.fn[namespaceName] = function executor(context) {
        if (this instanceof executor) {
          this.__context__ = context;
        }
        else {
          return new executor(this);
        }
      };
    }

    $.each(closures, function(closureName, closure) {
      $.fn[namespaceName].prototype[closureName] = function() {
        return closure.apply(this.__context__, arguments);
      };
    });
  };

})(jQuery);

(function($) {
	var $win=$(this); //reference to [window]
	function test(){
		alert('test fn');
	}
	
	$.namespace('alfa', {
			redify: function() {
					$(this).css('color', '#ff0000');
			},
			greenify: function() {
					//console.log($(this));
					//$(this).css('color', '#00ff00');
					return $(this).alfa().blueify();
					//return this.test();//this.alfa().blueify();
			}
	});

	$.namespace('alfa', {
			blueify: function() {
					console.log('bluefiy');
					$(this).css('color', '#0000ff');
			}
	});
})(jQuery);

$('#id1').alfa().redify();
$('#id2').alfa().greenify();