Fluent Functions

One of the things that makes jQuery so powerful is the way that it makes use of the fluent style of function calling. This allows you to write a chain of function calls:

function1().function2().function3()

For this to work function1 has to return an object which has function2 as a method and function2 has to return an object which has function3 as a method.

Notice that the first call is a simple evaluation of a Function object. That is, function1 is a Function object. The second call to function2 is a call to a Function property of whatever object function1 returns and so on.

This fluent style of function use depends on each function in the chain returning an object of the correct type to satisfy the next function call in the chain. This is usually, and most easily, done by creating function1 as a Function object which has function2, function3 and so on as properties. This is simple because the rule that each function has to return the correct type of object is transformed into:

return this; 

From your basic knowledge of JavaScript you will know that when you call a function this is set to the object that called the function and that in the case of a global function this is set to the Function object itself.

So, to implement our chained functions all we need to do is:

var function1=function(){
                           return this;
                        };

function1.function2=function(){
                                 return this;
                              };

function1.function3=function(){
                                return this;
                              }

You can see here that function1 is a Function object which has function2 and function3 as its properties. When function1 is called it returns this, which is a reference to function1. As a result the call to function2 works, as does the call to function3.

It is worth mastering this very common JavaScript idiom.

The jQuery Object Revisited

When you start using jQuery one of the first things you learn is how to make use of selectors to extract elements from the DOM. Often you start doing this without really examining what exactly is going on. The time has come to get to grips with the details.

When you are introduced to jQuery you are told that there is a function called jQuery or $ and you can use it to find DOM elements.

For example:

$("p");

or:

jQuery(“p”);

selects all of the <p> elements in a page. 

You can see quite clearly that this is a call to a function, even when written as $(). From the previous section you can also see that jQuery or $ is an instance of a global Function object – the global jQuery object.

The clever part is that this function returns a new jQuery results object complete with an array-like property that stores the DOM objects that matched the selector.

Why is this clever? Because the returned object has all of the functions and properties that you expect and you can start to use it at once. This allows you to use the fluent style of function calls.

Notice that the global jQuery object is a constructor for the jQuery results object – the two are related but they are not the same.

For example the results jQuery object has a function property called append and you can call this on the object returned by the first call.

For example:

$("p").append("<p>Hello</p>");

adds a paragraph with content "Hello" after every paragraph extracted by the selector "p".

The append function also returns a jQuery results object with an array of results of its operation and you can use this to call yet more jQuery functions.

You might be wondering why the term “array-like” keeps being used in connection with the jQuery results object?

The answer it that, while the jQuery result has elements and a length property, it isn’t a full JavaScript Array object and you cannot use any of the functions that the Array object supports.

There are some general purpose methods that help with the distinction between a jQuery results object and a standard JavaScript array. A jQuery object has lots of extra methods over and above a general array but it also lacks some array methods like .pop and .reverse.

You can convert any array-like object into a true array using:

$.makeArray(obj). 

For example:

result=$("p");
resultArray=$.makeArray(result);

converts result, which is a jQuery results object, into resultArray, which is a standard JavaScript array. 

Notice that makeArray is a property of the global jQuery object. That is, you call it using $ or jQuery. This is often confusing when you first meet the idea, but the fact that the jQuery object has properties and functions of its own and you can make use of them directly is very powerful.

That is, when we write:

$() 

or:

jQuery() 

we call the global jQuery function and generally get a jQuery results object back. However, when we write:

$.makeArray()

or:

jQuery.makeArray()

you are calling the makeArray function defined on the jQuery global object.

This distinction is important and there are also lots of examples of very similar functions being available as properties of the global jQuery object and as properties of the jQuery results object.

You really do need to keep in mind, and it has been stated several times earlier, that the jQuery results object is always an array-like object that has elements that are DOM objects. Forgetting it is the cause of most jQuery errors.

Even if:

$("p");

only matches a single element, the result is still an array-like object of just one element and if you want to work with it directly you need to use:

$(“p”)[0]; 

You also need to remember that elements of the jQuery result are DOM elements not jQuery objects in their own right.

That is:

$("p") 

is a jQuery object, but:

$("p")[0];

is a DOM element object and doesn’t have any of the jQuery methods that we have been using.  

As already discussed, if you want to make use of any DOM object as a jQuery results object then the solution is to use the global jQuery function to create a jQuery results wrapper object.

That is

$($("p")[i]);

returns a jQuery object which wraps the i^th selected paragraph. After this you can do things like

$($("p")[i]).append("<p>Hello</p>");

which would append the new paragraph to the i^th selected paragraph.

There is one final subtle point to be aware of. When you call the global jQuery function it creates a new jQuery results object. If you call another jQuery function using that results object then in most cases it will return a new jQuery results object.

That is, in:

$(“selector”).function1().function2().function3();

a new jQuery results object is created as the result of each function call. This means four different results objects are created and there is a sense in which this chain is equivalent to:

var r1=$(“selector”);
var r2=r1.function1();
var r3=r2.function2();
var r4=r3.function3();

The new jQuery results object contains a reference to the old jQuery results object and as you make a chain of function calls all of the intermediate results are kept.

There are also ways to revert to earlier results generated by a chain of function calls as discussed at the end of Chapter 5.

Summary

• In JavaScript a function is also an object and can have properties of its own.

• A function can have functions as properties and this means that you can call the function as myFunction() or one of its function properties as myFunction.property()

• Function chaining is a common JavaScript idiom and it is achieved by always returning an object which has the next function in the chain as a property.

• The simplest form of function chaining is when a single object has all of the functions that can be in the chain as properties and each function returns this.

• The jQuery global function $ or jQuery is a constructor for a jQuery results object. When you call the global function $(“selector”) or jQuery(“selector”) the result is a jQuery results object.

• The jQuery global function has properties and methods of its own which can be called as $.function() or jQuery.function()

• Sometimes very similar functions are available via the jQuery results object and the global function and you need to be careful which you use.

• The jQuery results object isn’t a full Array object but you can convert it into one using $.makeArray.

• When used in fluent style each jQuery function produces a new jQuery results object. The old results are kept and you can move back in the “stack” to restore earlier results.

 Available as a Book:

buy from Amazon

1. Understanding jQuery
2. Basic jQuery CSS Selectors
      Extract: The DOM
3. More Selectors
      Extract: Basic Selectors
4. The JQuery Object
5. Filters 
6. DOM Traversal Filters 
7. Modifying DOM Objects
      Extract: Modifying The DOM 
8. Creating Objects & Modifying The DOM Hierarchy
   
9. Working With Data
      Extract: Data ***NEW!!!
10. Forms 
11. Function Queues
12. Animation 
13. jQuery UI
14. jQuery UI Custom Control
15. Easy Plugins 
16. Testing With QUnit
17. Epilog A Bonus Function

Also Available:

buy from Amazon

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info

<ASIN:1871962501>

<ASIN:1871962528>

<ASIN:1871962560>