How Does Jquery Accomplish Chaining Of Commands?
Solution 1:
All the methods on a jQuery
object will return a jQuery
object.
In this particular example you can see them being created jQuery().find( selector )
and jQuery( elem || [] )
Solution 2:
As per your comment:
This is from the example here: http://en.wikipedia.org/wiki/Fluent_interface#JavaScript With extra comments
var Car = function() {
var speed, color, doors;
this.setSpeed = function(speed) {
this.speed = speed;
**//Returns the reference to the calling `car` object** returnthis;
};
this.setColor = function(color) {
this.color = color;
**//Returns the reference to the calling `car` object** returnthis;
};
this.setDoors = function(doors) {
this.doors = doors;
**//Returns the reference to the calling `car` object** returnthis;
};
};
// Fluent interface
**//Each method returns a reference to the object itself**
**//so the next method chain is refering back to the previous returned value**
**//ie - itself, the orginal object that started the call chain**
myCar = new Car();
myCar.setSpeed(100).setColor('blue').setDoors(5);
// Example without fluent interface
**// normal, non fluent style, where each method returns Void**
**// so you need to start with the object reference yourself each time**
myCar2 = new Car();
myCar2.setSpeed(100);
myCar2.setColor('blue');
myCar2.setDoors(5);
Solution 3:
I will try to explain with an example. For this example you should open chrome developer console or firebug.
var $m = function() {
returnthis;
};
$m.log = function(param) {
console.log(param);
returnthis;
};
$m.alert = function(param) {
this.log('alerting: ' + param);
alert(param);
returnthis;
};
$m.log('start').alert('Sample message').log('end').log('success');
As you can see, every function returns this
, which refers to $m
for this example. This way I can chain as many methods as I want.
Solution 4:
My understanding is this: Jquery functions return a reference to the relevant object when they execute, which is what allows you to chain operations together. So, if you perform an operation to find a div, the function returns a reference, allowing you to immediately chain another operation to the end of it.
Solution 5:
Using return this; returns the parent OBJECT
var myObject = {
a: function(){
alert('a');
returnthis;
//this == myObject, so returning myObject means //the next function in the chain will call myObject.___
},
b: function(){
alert('b');
returnthis;
}
}
myObject.a().b();//alerts 'a' then alerts 'b'
Post a Comment for "How Does Jquery Accomplish Chaining Of Commands?"