¿Cómo funciona el encadenamiento jquery?

Question

No estoy pidiendo lo que es la sintaxis adecuada para encadenar, sé que podría ser algo como:

$('myDiv').removeClass('off').addClass('on'); 

Sin embargo estoy muy curiosa de entender el funcionamiento interno de la misma, por lo que yo sé es el encadenamiento una de las ventajas contra otros frameworks famosos, pero esto nos parece una gran abstracción para un programador novato como yo, estoy seguro de que hay alguien por ahí que puede darme una explicación que me permita entender cómo funciona el encadenamiento.

Gracias!

Answer 1

Si tiene un objeto con ciertos métodos, si cada método devuelve un objeto con métodos, simplemente puede llamar a un método desde el objeto devuelto.

var obj = { // every method returns obj---------v 
    first: function() { alert('first'); return obj; }, 
    second: function() { alert('second'); return obj; }, 
    third: function() { alert('third'); return obj; } 
} 

obj.first().second().third(); 

DEMO:http://jsfiddle.net/5kkCh/

Answer 2

Básicamente, la primera llamada a la función $('myDiv') devuelve un objeto jQuery, luego cada llamada subsiguiente devuelve la misma.

sin apretar,

var $ = function(selector) { 
    return new jQuery(selector); 
}; 

jQuery.prototype.removeClass = function(className) { 
    // magic 
    return this; 
} 

Answer 3

Todo lo que se está haciendo es devolver una referencia a this cuando el método termina. Tome este objeto simple, por ejemplo:

var sampleObj = function() 
{ 
}; 

sampleObj.prototype.Foo = function() 
{ 
    return this; 
}; 

Usted podría cadena de estas llamadas durante todo el día debido a que regrese una referencia a this:

var obj = new sampleObj(); 
obj.Foo().Foo().Foo().Foo() // and so on 

jQuery simplemente realiza una operación, a continuación, devuelve this.

Answer 4

return $this; 

cada función jQuery devuelve una instancia de la clase jQuery, que puede entonces tener métodos llamados en él. podrías descomponerlo, y este código tendría el mismo efecto.

jQuery_obj = $('myDiv'); 
jQuery_obj = jQuery_obj.removeClass('off'); 
jQuery_obj = jQuery_obj.addClass('on'); 

Answer 5

El punto es que una función debe evaluar a la función "principal". Por ejemplo,

foo().bar().test(); 

tiene que evaluar a:

foo().test(); 

para que pueda llamar a otra función en foo(). Para ello, puede return this:

function foo() { 
    // empty, nothing interesting here 
} 

foo.prototype.bar = function() { 
    return this; 
} 

foo.prototype.test = function() { 
    return this; 
} 

Entonces,

var something = new foo(); 
something.bar() === something; // true 

Y debido a esto:

something.bar().test() === something.test(); // true 

Así pues something.bar() evalúa a something, puede llamar inmediatamente a la segunda función en una ida.

Answer 6

En el encadenamiento de la función/método principal se devuelve un objeto que luego es utilizado por la función/método secundario, y las cosas siguen así. En resumen, el jQuery o $ se devuelve (un objeto) que permite el encadenamiento.

Es el mismo mecanismo continuación

var obj=$('input'); //returns jQuery object 
var obj1=obj.val('a'); //returns jQuery object 
var obj2=obj1.fadeOut();//returns jQuery object 

Parece que este si se hace con el encadenamiento

$('input').val('a').fadeOut(); 

Answer 7

Aquí está un ejemplo de encadenamiento de devolución de llamada condicional, como se usa en el $.ajax jQuery función.

// conditional callback function example 
myFunction = function() { 

    // define event callback prototypes without function parameter 
    var callback_f = new Object; 
    callback_f.callback1 = function() { return callback_f; }; 
    callback_f.callback2 = function() { return callback_f; }; 

    if ([condition]){ 
     // redefine the callback with function parameter 
     // so it will run the user code passed in 
     callback_f.ReturnPlayer = function (f) { f(); return callback_f; }; 
    }else{ 
     callback_f.NewPlayer = function (f) { f(); return callback_f; }; 
    } 

    return callback_f; 
} 

Answer 8

Una de las formas de encadenamiento, comprobar demo.

test("element").f1().f2().f3()