A jQuery Plugin Design Pattern

I’ve been using jQuery quite extensively and I recently started encapsulating my code using the jQuery plug-in design pattern. I really like the way it reads and it’s already starting to make my code both safer and more reusable.

One thing I find myself wanting to do quite frequently is to wire up the hover events to add a specific animation behaviour on mouseover and remove it on mouseout. This kind of thing fits quite nicely with jQuery’s architecture and I was able to write a nice little self-contained plug-in that does exactly that.

The official jQuery site offers us some direction on this point:

To make sure that your plugin doesn’t collide with other libraries that might use the dollar sign, it’s a best practice to pass jQuery to a self executing function (closure) that maps it to the dollar sign so it can’t be overwritten by another library in the scope of its execution.

EDIT: I’m now hosting this plugin source publicly on GitHub:

git://github.com/quantumtom/Test-jQuery-Plugin.git


(function($) {
	$.fn.addHoverFade = function(options) {
		// Use the default options 
		// if they haven't been overridden
		var myOptions = $.extend({}, $.fn.addHoverFade.defaults, options);

		return $(this)
			// Set the initial fade setting
			.fadeTo(myOptions.fadeSpeed, myOptions.opacityStart)

			// Wire up your new method
			.hover(
				function(){
					$(this).
						fadeTo(myOptions.fadeSpeed, myOptions.opacityFinish)
				},
				function(){
					$(this).
						fadeTo(myOptions.fadeSpeed, myOptions.opacityStart)
				});
			};

	// Initialize plugin defaults
	$.fn.addHoverFade.defaults = {
		fadeSpeed : "medium",
		opacityStart : "0.5",
		opacityFinish : "1.0"
	};
})(jQuery);

So, what we’re doing is chaining a new extension to the jQuery object. We do this by calling the public reference to the jQuery object – $ – and appending to its .fn() method. What we append to it is our new plugin and we do this by defining it as a function.

Once that’s done we define a property of our new plugin; we do this by assigning it the values of a dictionary object (remember, no such thing as an associative array in JavaScript).

Lastly, we pass all this back to the internal reference of the jQuery object. Ta-dah! You’ve wired up the plugin back into jQuery.

Accessing your new jQuery Plugin’s API extension

$(".my-html-class-attribute").addHoverFade();

Or we can specify to override the middle-of-the-road default options:

$("#the-example").addHoverFade({ opacityStart : "0.35", opacityFinish : "0.95", fadeSpeed : "fast" });

TL;DR

“So, where’s the demo?”

Here:

Not much to it, really. Now you have access to your custom method by just tagging it on to the end of your jQuery selector statement. You can optionally adjust the default configuration by specifying custom parameters when you call the method.

Published by

Tom Cornyn

I'm just a regular guy. I eat tires.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s