The other purpose of this JavaScript article tutorial is it to guide us step by step to build a plug-in for jQuery framework by reusing old JavaScript source codes or you can write new ones. From this JavaScript article tutorial, you will learn how to create a completed jQuery plug-in, please go to the inner post page for full instructions, comments and JavaScript code examples.

• Demo
• Enlarge
• Reload
• New window

Adding Chaining

If you are not returning a specific value from your function, with only a small tweak you can gain the benefit of being able to have your utility chained together with other jQuery code. Such plugin chains are often used to accomplish complex actions easily and efficiently.

The trick is to simply return the “this” value that contains the wrapped set:

  (function($){

    $.fn.redAlert = function(badValue) {
      return this.each(function() {

        if ($(this).val().toLowerCase().indexOf(badValue.toLowerCase()) >= 0)

           $(this).addClass('error').css('background-color', 'red');
      });

    };
  })(jQuery);

So I can then construct a chain of calls:

$("form input:text").redAlert('Stink').addClass('scanned');

But Where is the Namespacing?

You may have noticed that we skipped an important step when implementing our redAlert plugin. It isn’t namespaced.

Simply pushing our function into a sub-object, like we did for our readCookie utility plugin won’t work:

(function($){
  // BAD, THIS WON'T WORK
  $.fn.webvantaUtils = {};

  $.fn.webvantaUtils.redAlert = function(badValue) {
    return this.each(function() {

      if ($(this).val().toLowerCase().indexOf(badValue.toLowerCase()) >= 0)

        $(this).addClass('error').css('background-color', 'red');
    });

  };
})(jQuery);

When doing so, we lose access to the wrapped set contained in the initial “this” variable. It instead points to the webvantaUtils object, not the wrapped set.

To get around this issue, the jQuery recommendation is to organize all of your plugin methods within an object literal, then use a dispatcher technique to access the desired functions:

(function( $ ){

  var methods = {
    init : function( options ) { },

    redAlert : function(badValue) {
      return this.each(function() {

        if ($(this).val().toLowerCase().indexOf(badValue.toLowerCase()) >= 0)

          $(this).addClass('error').css('background-color', 'red');
      });

    }
  };
  $.fn.webvantaUtils = function( method ) {

    // Method dispatch 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.webvantaUtils' );
    }

  };
})( jQuery );

And then call it via:

$("form input:text").webvantaUtils('redAlert','Stink').addClass('scanned');

This approach is a little more complicated, but ensures that the namespace is “clean”. It uses a few JavaScript tricks to accomplish its goal. First, the actual functions of our plugin are stored as attributes of the literal object called “methods”. Second, the entry point to our plugin is the “namespace”, here “webvantaUtils”.

When we invoke the plugin through this entry point, it first checks to see what kind of parameters were passed in. That may sound odd, since it looks like the entry point only takes one named parameter “method”. Regardless of the number of named arguments, JavaScript doesn’t complain if “extra” parameters are passed in.

The expectation is that the first parameter will either be nothing at all, an object of some kind, or a string naming the desired function.

First the entry point tries to use the value of “method” to find a matching attribute of the “methods” object. If that fails, it next checks to see if “method” is itself an object OR it is a null or undefined value. In that case, with our sample above, an optional “init” method is invoked. This is purely convention, and could be stripped out if you don’t need to initialize anything. “init” is a handy place if you have default values you need to set up or override.

If none of the previous conditions are true, then an error message gets displayed in the console.

Now, in the case of both the init function or a matched function name being found in the methods object, the code uses the JavaScript apply() method. apply() is a method on the Function object. apply()’s job is to execute the receiver’s function, and it uses its first parameter to set what the value of “this” will be inside of that function. The second parameter is an array which is passed to the called function as its parameter list.

Here we see the special Argument object being used in the variable called “arguments”. JavaScript always sets “arguments” to contain the complete parameter list of a called function. In this case, it is used to pass on any parameters sent to the entry point (other than the first one in the case of a name string being passed in to invoke a plugin function).

This may be slightly confusing, yet digging in to the JavaScript is educational. The good news is that you can focus on using this “plugin pattern” as a template for your own code and mostly ignore the rest of the details when getting started.

The jQuery Plugin Authoring guidelines contain even more examples.

UI Widget Factories

While we won’t get in to the details here, we should point out that if you are trying to build user interface code, or need to construct more complicated, statefull plugins, a worthwhile plugin architecture to review is the jQuery UI Widget factory mechanism. Widgets provide additional conventions for organizing code including dealing with defaults and options on a per widget basis, code hiding of “private” functions used by the widget, and ways of exposing widget data accessors, events, and other functionality.

A Wrap of Plugins

We’ve briefly explored the basics that will permit you to clean up and possibly refactor your existing JavaScript code into reusable jQuery plugins. With the information presented in this article, and the Plugin Authoring notes on the jQuery.org site, you should have all you need to get started. Next time, we will take a peek at a relatively new client-side storage technology that has come out of the HTML5 efforts and build a small jQuery plugin that wraps it with a generic API.

• Code
• Print

• Comment (1)
• Write

by Preview

Cancel reply

Write your comment

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New