JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<button class="btn1">Button 1</button>
<button class="btn2">Button 2</button>
<button class="btn3">Button 3</button>
</body>
JavaScript
$(function() {
$("body").myplugin( {
helperFunctions : {
funcA : function( obj ) {
$(obj).text( "Button A" );
},
funcB : function( obj ) {
$(obj).text( "Button B" );
},
funcC : function( obj ) {
$(obj).text("Button C");
}
},
handlers : [
{ on : "click",
selector : ".btn1",
handlerFunc : function( funcs, obj ){
funcs.funcA( obj );
}
},
{ on : "click",
selector : ".btn2",
handlerFunc : function( funcs, obj ){
funcs.funcB( obj );
},
},
{
on : "click",
selector : ".btn3",
handlerFunc: function( funcs, obj ) {
funcs.funcC( obj );
}
}
]
});
});
(function ($) {
$.fn.extend({
myplugin: function ( settings ) {
var $this = $(this);
function createHandlerFunction( func, obj ){
return func( settings.helperFunctions, obj ) ;
}
for( var handlerIdx in settings.handlers ){
var handler = settings.handlers[ handlerIdx ];
$this.on( handler.on, handler.selector, function() { return createHandlerFunction( handler.handlerFunc, this ) } );
}
}
});
})(jQuery);