JSFiddle - React, Tailwind, and code Playground

by Pavel Kityan

HTML

<div id="area1"></div>
<div id="area2"></div>
<div id="area3"></div>
<a href="#" id="kill_green">убить зеленый</a>

JavaScript

(function ($) {

    $.fn.myPlugin = function (options) {



        var methods = {
            init: function () {
                var elem = $(this);

                elem.css({
                    width: config.width,
                    height: config.height,
                    background: config.background
                });

                elem.on('click', function (event) {
                    alert('clicked on ' + config.background);
                    event.stopPropagation();
                });
                
                var ns = (Math.random()*10000 + '').substring(0,4) + Date.now();
                
                $('body').on('click.' + ns, function (event) {
                    alert('clicked on body');
                });
                
                elem.data('config', config);
                elem.data('ns', ns);
            },

            destroy: function () {
                var elem = $(this);
                var ns = elem.data('ns');
                elem.removeData();
                $('body').off('click.' + ns);
                elem.off('click');
                elem.css('background', '#EEE');
                
            }

        };


        if (methods[options]) {
            return methods[options].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof options === 'object' || !options) {
            var config = $.extend({
                background: 'red',
                width: '100px',
                height: '100px'
            }, options);
            return methods.init.apply(this, arguments);
        }

    }

})(jQuery);

$('#area1').myPlugin({
    background: 'red',
    width: '100px',
    height: '100px'
});
$('#area2').myPlugin({
    background: 'green',
    width: '100px',
    height: '100px'
});
$('#area3').myPlugin({
    background: 'teal',
    width: '100px',
    height: '150px'
});


$('#kill_green').on('click', function(event){$('#area2').myPlugin('destroy');...