JavaScript · Programming

jQuery plugin development guide

Steps for authoring jQuery plugin.

First 2 steps are the bare basic steps.

Step 1 : Create Closure
*Create an self executing anonymous function which takes jQuery as parameter for creating a closure.
*This function takes one parameter ‘$’ which is a reference for jQuery

( function($) { //...} )( jQuery );

Step 2: Create plugin
*Extend the jQuery ‘fn’ (pronounced as ‘effin’) object to create a new plugin
*This is done inside the anon function created in step 1
*NOTE : ‘fn’ is the alias for prototype object of jQuery

(

function($) {

    $.fn.myplugin = function() {
    //here 'myplugin' is the name of the new plugin that extends the jQuery 'fn' object.
    //the plugin name must be unique in the jquery namespace otherwise it may overwrite the existing plugins.
    //'this' keyword here refers to the jQuery object itself, NOT the DOM object
    }   
}

)(jQuery);

Step 3: Using a single namespace with multiple function in a plugin
*plugin must NEVER take more than one namespace
*If a plugin has multiple methods then encapsulate them in an object literal or create these as functions in the plugin closure and call them using the plugin name parameter passed in from user.

(
function($) {
    
    //define other functions
    function func1(param) {//...}
    
    function func2() {//...}
    
    $.fn.myplugin = function(options) {

        var mtName = options.methodName; // or just options if it is a string with method name
        
        switch (mtName)
        {
        case 'func1':
          return func1(options.data);
          break;
        case 'func2':
          return func2();
          break;
        default:
          alert('no such method exists');
        }
    }
}
)(jQuery);

Step 4: defaults and options
*If we need to have some defaults and user supplied options then we need to provide that in our code

(

function($) {
    
    $.fn.myplugin = function( options ) {
        //it takes 'options' parameter which is an object literal with user defined data
        
        //default settings
        var default_settings = {
            "point" : "0",
            "name"  : "default"
        };
    
        //merge the user options with default settings
        if ( options ) {
            $.extend( default_settings, options );
        }
        
        //... rest of the plugin code
        
    }
    
}

)(jQuery);

Step 5: Chainability
*In most cases we need to maintain the chainability of our jquery functions
*To do this return the ‘this’ keyword from the plugin

(
    function($) {

        $.fn.myplugin = function(options) {

            //return this for chainability
            return this.each(
                function() {
                    //some code here
                }
            );

        }

    }
)(jQuery);

==Summary and Best Practices==
Plugins are a great way to extend jQuery functionality.

Here are some recommendations from jQuery team about plugins:

  • Always wrap your plugin in (function( $ ){ // plugin goes here })( jQuery );
  • Don’t redundantly wrap the this keyword in the immediate scope of your plugin’s function
  • Unless you’re returning an intrinsic value from your plugin, always have your plugin’s function return the this keyword to maintain chainability.
  • Rather than requiring a lengthy amount of arguments, pass your plugin settings in an object literal that can be extended over the plugin’s defaults.
  • Don’t clutter the jQuery.fn object with more than one namespace per plugin.
  • Always namespace your methods, events and data.
  • jQuery.fn is pronounced jQuery effin’
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s