How to Create a jQuery Extendable Plugin

In this post I am going to go over how to setup your plugins so they can be easily extended to add future features without compromising the original plugin. It's actually pretty easy to do but there doesn't seem to be a lot of info on it. Now I will assume you know the basics of setting up a jQuery plugin. If you don't go read the jQuery docs here and then come back.

Here is what a typical setup will look like (this was pulled from the jQuery Docs)

(function( $ ){

  var methods = {
    init : function( options ) { 

    },
    show : function( ) {

    },
    hide : function( ) { 

    },
    update : function( content ) { 

    }
  };

  $.fn.tooltip = function( method ) {

    // Method calling logic
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
    }    

  };

})( jQuery );

It's setup to allow you to create multiple functions and setup so you can add some in the future. The only downside is that you will have to come into your file and make the changes which is okay but what if you only need those changes for one project. Now your either going to have to manage multiple versions or just make some slight changes to your plugin's setup to make it extendable. I suggest the latter :)

Here is what the new setup will look like

(function( $ ){

  $.fn.tooltip = function( method ) {
    var methods = $.tooltip.methods;

    // Method calling logic
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
    }    

  };


  $.tooltip = {
    methods : {
        init : function(options) {

        },

        show : function() {

        },

        hide : function() {

        },

        update : function() {

        }
    },

    addMethods : function(newMethods) {
        $.tooltip.methods = $.extend($.tooltip.methods, newMethods);
    }
  };

})( jQuery );

Now basically what we have done is taken our methods variable and made it accessible by attaching it and a function called addMethods to the tooltip object. This allows you to add functions as needed and you can break them out into their own file. It also allows you to override any of the functions without compromising the code you have already written.

Usually what I do is create a new file when I want to add a new method. In that file you would write something like the following

(function( $ ){

  $.tooltip.addMethod({
    spin : function() {

    }
  });

})( jQuery );

This will now add a function called spin that can be called by $(object).tooltip('spin');

As you can see we have added functionality to the plugin without having to make the file bigger. This is great because now your plugin is more modular and you can add features to pages only when needed. Now remember when you are adding your files the base plugin has to be added before you add the additional features or it will throw an error because those objects do not exist.

I hope this helps someone out there and if you have any problems or questions leave me a comment and I will try to answer them right away.