Comments:"My Favorite jQuery Plugin Template - Moshe's Blog"
URL:http://kolodny.github.io/blog/blog/2013/12/27/my-favorite-jquery-plugin-template/
I’ve dabbled quite a bit in jQuery and writing plugins for it. I’ve played around with quite a few different ways to start a plugin, and now I’ve got a new favorite:
;(function($) {
// multiple plugins can go here
(function(pluginName) {
var defaults = {
color: 'black',
testFor: function(div) {
return true;
}
};
$.fn[pluginName] = function(options) {
options = $.extend(true, {}, defaults, options);
return this.each(function() {
var elem = this,
$elem = $(elem);
// heres the guts of the plugin
if (options.testFor(elem)) {
$elem.css({
borderWidth: 1,
borderStyle: 'solid',
borderColor: options.color
});
}
});
};
$.fn[pluginName].defaults = defaults;
})('borderize');
})(jQuery);Now let’s see how we would use it.
$('div').borderize();
$('div').borderize({color: 'red'});Here’s some of the reasons that I like this technique
You can still use a default option inside of a override (similar to calling a parent property in class based programming) Easily change the name of the plugin as long as we use pluginName all over (also there’s an insignificant minification advantage of that). Cleaner (at least in my opinion) Point #1 is huge, let’s see an example that. Let’s say we want to override the testFor function but still want the option of defaulting to the original behaviour
$('.borderize').borderize({
testFor: function(elem) {
var $elem = $(elem);
if (elem.is('.inactive')) {
return false;
} else {
// calling "parent" function
return $.fn.borderize.defaults.testFor.apply(this, arguments);
}
}
});We can even do this with regular properties like this
var someVarThatMayBeSet = false;
/* code ... */
$('.borderize').borderize({
color: someVarThatMayBeSet ? 'red' : $.fn.borderize.defaults.color
});Do you have a different style that you like? Leave a comment below
Edit I’ve changed the $.each call to $.extend(true, {}, defaults, options); based on phlyingpenguin comment.