jQuery plugins are popping up all over the place and just about everyone is trying to get in on the action. What determines whether a plugin is good or bad for you is largely up to your opinion and your requirements, but there are few things that you can do when writing your plugins to guarantee at least a bit of quality and standardization in your plugins that everyone who looks at your plugin code will be thankful for.
This “rule” is generally adhered to pretty well, but there are still authors out there who either don’t know about it or feel they’re somehow exempt from doing things the smart way. Keeping all of your code in an IIFE has several benefits:
- Every variable you create is protected from tampering by other code because it is in a closure rather than the global scope (unless you “forget” to use the
varkeyword in front of them).
- You can send
jQueryinto the function as a parameter, allowing you to use
$or any other tiny variable name you wish (though it’s probably best to use
$so you don’t confuse anyone) without having to type out the long name every time or worrying that someone might use
jQuery.noConflict()and busting your code.
- You can use
undefinedwithout any risk of someone overriding it. Sure, the likeliness is REALLY small, but some people are just malicious like that and since it’s so simple, there’s no reason not to do it.
A great majority of plugins have options, and many of the ones that don’t (or have some, but not many) should add some in. Options make your plugin more flexible and useful to more people. You can’t ask everyone to supply every single option every time, so you need to have some default settings. Then, when someone sends their options into your plugin, use jQuery’s
extend function to have the supplied options overwrite the defaults. Of course, try to make the defaults as useful as possible so that users rarely need to supply their own settings.
When you use variables or values that never change, keep them outside of the functions that you’re extending jQuery with. When you place them into your functions, they are recreated every time that function is executed, which wastes memory and takes more time. For instance, your default settings should be defined outside of the functions.
If your code looks like this:
You could make it better like this:
A lot of jQuery’s power comes from its ability to chain functions together. If you don’t return
this (the jQuery object you’re working with), then you’re taking away something that every jQuery programmer has grown to expect. It’s not like it’s hard or anything, so just do it!
In most programming situations you use
setX(value) to get and set properties, but in jQuery, people have become quite accustomed to using
pluginFunc('prop', value) like jQuery’s
attr function. This makes your functions more complicated, but cuts down the number of functions you’re adding to jQuery, which means that you’re less likely to clash with other plugins.
jQuery plugins are tons of fun to make, which is part of the reason there are so flippin’ many of them out there. If you’re going to make one, make sure you try to follow these tips. You’re code will be faster, clearer to understand, and play well with others. Make sure you spread this throughout the internet because the more developers who know this, the better off our jQuery plugins will all be.
Got any of your own tips? Leave them in the comments for others to read.