Creating boilerplate for jQuery plugins

Question

I've been writing some smaller jQuery plugins lately, and I've been thinking of writing up some boilerplate that I can use when writing new ones. I have code that works (for now), but I want to share it and get feedback on things I may be missing as I move to larger plugins.

/**
*  jQuery Plugin Boilerplate
*  - find and replace the following variable names
*    - utilities   : namespace for shared utility functions
*    - PluginClass : class name for plugin object
*    - pluginName  : the name of your plugin function, e.g. $('.foo').myPlugin()
**/
(function($) {

    /**
    *  Utility function object
    *  - namespace wrapper for variables or functions shared between all plugin instances
    **/
    var utilities = {

        // example utility function
        getInt: function(i) {
            i = parseInt(i, 10);
            return isNaN(i) ? 0 : i;
        }

    },

    /**
    *  Main plugin class
    *  - encapsulate each instance of plugin as an object
    **/
    PluginClass = {

        // other instance-specific functions get defined here

        init: function(el,options) {
            var _t = this;  // for maintaining reference to plugin class in callbacks

            this.options = $.extend({}, $.fn.pluginName.defaults, options);
            this.el = el;
            this.$el = $(el);

            // do your plugin stuff
        },

        callFn: function(fn) {
            switch(fn) {
              // case statements matching allowable function aliases
              // which execute the appropriate plugin functions
            }
        }

    };

    /**
    *  Plugin function
    *  - for each element passed to the plugin, create a new class instance
    **/
    $.fn.pluginName = function () {
        var arg = arguments[0];
        var fn, options;

        // if the argument passed is a string, then the user
        // is calling a function. Otherwise, it's an options object
        if(typeof arg === 'string') { 
            fn = arg; 
        }
        else {
            options = arg;
        }

        if (this.length > 0) {
            return this.each(function(i) {
                var el = $(this), p;

                // if plugin instance already exists, use it
                if(el.data('pluginName')) {
                    p = el.data('pluginName');
                    if(fn) { p.callFn(fn); }
                    else { p.init(this,options); }
                } else {
                    p = Object.create(PluginClass);
                    el.data('pluginName', p);
                    p.init(this,options);
                }
            });
        }

    };

    /**
    *  Plugin default options
    *  - created outside of plugin function for easier overriding by user
    **/
    $.fn.pluginName.defaults = {
        some: thing,
        foo: 'bar'
    };

})(jQuery);​

Here's an example I created using this boilerplate. It's nothing fancy, it simply takes the text of an element and paints each character with a different color.

jQuery Plugin Demo - $.paintText()

My main concern here is with the functionality of using $('#foo').paintText('fnAlias') to call a function on an existing plugin instance. My way seems to work, but part of me feels there may be a more efficient way.

Thanks for any help.

Answer 1

From a once over:

• I like how you store both el and $el
• I also like how you expose your defaults
• Not sure about _t, I think generally self is considered to a better name for this
• You should have a spot in your boilerplate to define the prototype of your plugin class
• Lint finds nothing worth mentioning