5 Tips to Make Your jQuery Plugins Awesome

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.

1) Close Off Your Code in an Immediately Invoked Function Expression (IIFE)

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:

1. 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 var keyword in front of them).
2. You can send jQuery into 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.
3. You can use undefined without 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.

(function($, undefined) {
    // Your Plugin Code Goes Here
}(jQuery));

2) Supply Default Options and Extend Them

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.

var defaultOptions = {
    color: 'red',
    auto: false,
    awesome: 'definitely',
    rating: 10
};

options = $.extend({}, defaultOptions, suppliedOptions || {});

3) Pull Static Variables out of Your Functions

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:

$.fn.pluginFunc = function(options) {
    var defaultOptions = {
            color: 'red',
            auto: false,
            awesome: 'definitely',
            rating: 10
        };

    options = $.extend({}, defaultOptions, options || {});
    // ...
}

You could make it better like this:

var defaultOptions = {
    color: 'red',
    auto: false,
    awesome: 'definitely',
    rating: 10
};

$.fn.pluginFunc = function(options) {
    options = $.extend({}, defaultOptions, options || {});
    // ...
}

4) Return jQuery

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!

$.fn.pluginFunc = function(...) {
    // ...
    return this;
}

5) Use the Standard Getter/Setter Pattern

In most programming situations you use getX() and setX(value) to get and set properties, but in jQuery, people have become quite accustomed to using pluginFunc('prop') and 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.

Wrapping Up

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.