jQuery is one of my favorite libraries, in any language. And one of the greatest advantages of using jQuery is the abundance of third-party plug-ins available. Just about anything you need to do has probably already been done and extracted into a plug-in. That being said there are ways I feel you can completely ruin a jQuery plug-in.
Generating or expecting specific markup
Recently I needed a content slider for an existing homepage design. The first
promising plug-in I found generated the navigation for you, so it was out the
door. Several others expected very specific markup and made it difficult to
customize. Eventually I found one that at least allowed me to customize the
selectors and even though it still expected <li> elements I managed to easily
modify it to work.
Proposed Solution
If you are going to generate markup from your plug-in, make it customizable. It is trivial to add another string to your default options and makes it a lot easier to find. If you need to act on the markup, which you will, then base it on an ID, or class names, and not elements.
Example Plug-in
Here’s a very basic plug-in to give you an idea what I am talking about.
(function($) {
$.fn.awesomeMagic = function(options) {
// Overwrite the defaults with any provided options.
options = $.extend(true, {}, $.fn.awesomeMagic.defaults, options || {});
return $(this).each(function() {
// Append the markup.
$(this).append(options.html);
// Grab the elements needed.
var hat = $(this).find('.awesome-magic-hat');
var rabbit = $(this).find('.awesome-magic-rabbit');
// Perform awesome magic here.
});
};
$.fn.awesomeMagic.defaults = {
wand : true,
html : '\
<div class="awesome-magic-hat"> \
<div class="awesome-magic-rabbit"> \
Rabbit goes here. \
</div> \
</div>'
};
})(jQuery);
Plug-in Usage
$('#content').awesomeMagic({
html : '\
<span class="awesome-magic-rabbit">Rabbit goes here.</span> \
<span class="awesome-magic-hat" />'
});
How do you handle custom or expected mark up in your plug-ins? What are other ways you feel a plug-in can be ruined?
