This post is Part 4 in The Beginner’s Guide To Writing a jQuery Plugin.
In the last post, we covered the general model for writing a basic jQuery plugin. Although that particular approach works, there are still some improvements that should be made especially if you want your code to play nicely with other plugins.
Luckily, there are only a few minor changes that we need to make. These updates will provide the foundation on which we’ll be building the slideshow.
This particular post is important as it covers a couple of advanced topics of JavaScript programming. Read it, tinker with it, and make sure you understand it. It’s good stuff and can carry you a long way in future development efforts.
1. Lay The Foundation
In the last article, we landed with the final first of our demo code looking like this
[cc lang=”javascript”]
jQuery.fn.sayHello = function() {
return this.each(function() {
jQuery(‘body’).append(‘
Hello world!
‘);
});
};
[/cc]
This is fine for our first pass at a plugin, but we’re building a slideshow and that particular code has nothing to do with showcasing images. Let’s generalize this particular code to be more suited for a slideshow plugin.
First, let’s remove the code that actually displays the greeting and replace it with a TODO to remind us to come back and edit it.
[cc lang=”javascript”]
jQuery.fn.sayHello = function() {
return this.each(function() {
// TODO
});
};
[/cc]
Next, let’s rename the plugin’s function from sayHello to makeSlideshow:
[cc lang=”javascript”]
jQuery.fn.makeSlideshow = function() {
return this.each(function() {
// TODO
});
};
[/cc]
Now, we’ve got the basic skeleton for implementing our slideshow.
2. Using The ‘$’ Function
Before we begin implementing the actual plugin, there’s one more improvement that can be made. Recall in the last post, our plugin made no reference to the standard ‘$’ function (or “dollar function”) within the code. Instead, we were left writing our jQuery each time.
Cumbersome, I know.
There’s one more improvement that we can make to the skeleton code above that will allow us to use the $ function in our code and that won’t interfere with other plugins that may be running alongside our plugin in future implementations.
First, we need to wrap our code in an anonymous function:
[cc lang=”javascript”]
(function() {
jQuery.fn.makeSlideshow = function() {
return this.each(function() {
// TODO
});
};
});
[/cc]
Creating an anonymous function literally means that we’re creating a function has no name. Notice that up to this point, most functions are preceded by a name, such as sayHello, and the function keyword.
Here, our code is literally being passed as an argument to an anonymous function.
Functions are typically invoked by invoking there name, right? For example:
[cc lang=”javascript”]
lightSwitch.flipUp();
[/cc]
Similarly, invoking anonymous functions is achieved in the same way – there’s just no name with which you can actually call. So, we invoke it immediately after the declaring by adding two parenteheses immediately after the end of the function:
[cc lang=”javascript”]
(function() {
jQuery.fn.makeSlideshow = function() {
return this.each(function() {
// TODO
});
};
})();
[/cc]
Actually using the $ function within your plugin is easy:
- Simply pass ‘jQuery’ into the parameters of the anonymous function
- Update your makeSlideshow function so that it expecting an incoming variable (aptly named $)
- Replace all instances of ‘jQuery’ with ‘$’
[cc lang=”javascript”]
(function($) {
$.fn.makeSlideshow = function() {
return this.each(function() {
// TODO
});
};
})(jQuery);
[/cc]
And you’re done!
At this point, you may want to update the filename of the plugin to jquery.makeslideshow.js and update the reference to the file in your HTML.
3. Serious Developers Take This Seriously
This particular aspect of developing a jQuery plugin covers a couple of nuances of the JavaScript language.
If you’re actually looking to become more proficient at JavaScript programming, then take time to review this particular post again as it can go a long way it not only improving your programming skill, but your ability to read other people’s code, too. Don’t forget that you can always ask questions in the comments.
As usual, you can grab a copy of the source code up to this point right here. Next up, we’ll begin to actually implement the slideshow.
Aaron Fenwick says
Loving the tutorial! I appreciate the time you put into it, as I’m trying to delve into web design. 🙂
Tom McFarlin says
Thanks Aaron – glad to know we’re helping out :).
Aaron Fenwick says
For sure!