jQuery - Easy Plugins
Written by Ian Elliot   
Monday, 11 February 2013
Article Index
jQuery - Easy Plugins
Chaining
Avoiding Collisions

There comes a point in every jQuery programmer's life when they look at some JavaScript they have just created and realize that it is time to integrate it with jQuery - in short to create a plugin. It turns out to be easier than you might expect!

 

 

justjquery

Just jQuery

 

 

Plugins are simple ways to extend what jQuery does. If you create your plugin correctly then you will get additional benefits of being more closely integrated with jQuery. In particular, you can make your new facility work with jQuery chaining so that it can be part of a longer sequence of commands.

For the sake of an example, let's add the table generating function created in Getting Started With jQuery - Manipulating The DOM.

function table(n, m) {
 var table = $("<table>");
 var tbody = $("<tbody>");
 var row = $("<tr>");
 var cell = $("<td>");
 for (var i = 0; i < n; i++) {
  var tempRow = row.clone();
  for (var j = 0; j < m; j++) {
   tempRow.append(cell.clone().html(i+","+j));
  }
  tbody.append(tempRow);
 }
 table.append(tbody);
 return table;
}

This builds a table element with n rows and m columns which it returns as the result of the function. This is far too simple to really integrate into jQuery but imagine that it has lots of extra facilities implemented as properties and methods.

The Basic Plugin

A plugin is just a function - one function is one plugin and to keep things simple you should try and include as much functionality within each plugin rather than pollute the jQuery namespace with multiple functions.

To add you function to jQuery all you have to do is create a new property on jQuery.fn e.g.

jQuery.fn.myFunction= function definition

or

$.fn.myFunction= function definition

amd after this you can use your function with the usual jQuery syntax i.e.

jQuery().myFunction();

or

$().myFunction();

This is too easy!

If you want to fully understand what is going on then you need a little more explanation. However, if you don't want to know then skip to the next section.

The first question is why do we assign our new method to jQuery.fn and not directly to jQuery which is the object we are extending?

The answer is subtle.

The jQuery object that you usually reference with $ is just a constructor function for the jQuery function object that you actually use to get things done. Hence the jQuery.prototype property can be used to set all of the default properties for the jQuery function object that you use. So to add to the jQuery function object you simply add to jQuery.prototype or more usually jQuery.fn which is set up in the jQuery code to point to the same object as the prototype.

What this means is that if after you have added your new function you try to use

$.myFunction();

then you will get an error that jQuery doesn't have a property called myFunction. However

$().myFunction();

works because $() acts as the constructor for the jQuery function object which is returned in the usual way and this, does have a myFunction property via the prototype mechanism.

If you do want to add a property to the constructor then you add it directly. For example:

$.myFunction2=function{...};

adds the myFunction2 property to the jQuery constructor not to the jQuery function object. Following this you can call myFunction2 as:

$.myFunction2();

as it is a method of the jQuery constructor but not as:

$().myFunction2();

as it is not a property of the jQuery function object.

Why might you want to add a property to the constructor? The answer is that if you need to create a plugin that doesn't operate on a jQuery object then adding it to the constructor makes this very clear. In other words you can use selectors in $.myFunction2() but you can in $(selectors).myFunction2();

As already explained you don't need to know this to add a new plugin but it is interesting and might even help you debug things if anything goes very wrong.

The Table Plugin

So now we can create our table plugin which is easy:

$.fn.table=table;

Yes that's all we have to do. Of course in most cases you would define the function as an anonymous function e.g.

$.fn.table=function(n,m){....};

but you don't have to.

Now you can create a table just by writing

var myTable=$().table(2,3);

and then add it to a node in the DOM using

$("body").append(myTable);

jQuery Integration

This is easy but surely the table function should append the element it creates to any elements selected by the jQuery call? That is it would be better if you could write

:$("body").table(2,3);

and have the new element automatically append to the body element as the last child.

The key to doing this is to know that when the table function is called the context, i.e. this, is set to the jQuery object returned by $("body"). What this means is that you can work with the jQuery object within your function quite easily.

To append the table to the DOM objects selected by "body" all you need to do is change the end of the function to read:

 this.append(table);
  return table;
}

This works perfectly but it has some consequences. You can now write:

$("body").table(3, 2);

and the table will be appended as the last child element of the body.
However you can now no longer call your function outside of the context of jQuery i.e. it can only be run as a plugin. To stop its direct use you need to either define it as an anonymous function or in an immediately invoked function expression IIFE - more of which later.

The next problem is that the append will add your table object to each of the selected elements in the jQuery object. That is if you do:

$("div").table(3, 2);

a 3 by 2 table will be added as the last child of each matching div.

This might be exactly what you want to do but if you want to take the alternative standard jQuery action of only effecting the first selected element you have to code this in your plugin.

So for example if you want to change the behavior to adding a table to the first element of the selection you might use:

 this.first().append(table);
 return table;
}

However, you have to be careful how to work with the selection -  it has repercussions as we will see.



Last Updated ( Saturday, 25 October 2014 )
 
 

   
Copyright © 2014 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.