come funziona il concatenamento jquery?

Question

Non sto chiedendo che cosa è la sintassi appropriata per il concatenamento, so che potrebbe essere qualcosa di simile:

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

Tuttavia Sono davvero curioso di capire il funzionamento interno di esso, per quanto ne so è il concatenamento uno dei vantaggi rispetto ad altri framework famosi, ma questo a una grande astrazione per un programmatore principiante come me, sono sicuro che c'è qualcuno là fuori che può darmi una spiegazione che mi permetta di capire come funziona il concatenamento.

Grazie!

Answer 1

Se si dispone di un oggetto con determinati metodi, se ogni metodo restituisce un oggetto con metodi, è sufficiente chiamare un metodo dall'oggetto restituito.

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

Fondamentalmente la prima chiamata di funzione $('myDiv') restituisce un oggetto jQuery, quindi ogni chiamata successiva restituisce la stessa.

Liberamente,

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

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

Answer 3

Tutto ciò che si sta facendo sta tornando un riferimento alla this quando il metodo termina. Prendete questo semplice oggetto, ad esempio:

var sampleObj = function() 
{ 
}; 

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

Si potrebbe catena di queste chiamate tutto il giorno perché si restituisce un riferimento a this:

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

jQuery esegue semplicemente un'operazione, quindi restituisce this.

Answer 4

return $this; 

ogni funzione jQuery restituisce un'istanza della classe jQuery, che può quindi avere metodi chiamati su di esso. potresti scomporlo e questo codice avrebbe lo stesso effetto.

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

Answer 5

Il punto è che una funzione deve valutare la funzione "padre". Quindi ad es.

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

deve valutare a:

foo().test(); 

modo che si può chiamare un'altra funzione foo(). Per fare questo, è possibile return this:

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

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

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

Poi,

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

E a causa di questo:

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

Quindi, a causa something.bar() viene valutato come something, è possibile chiamare immediatamente la seconda funzione in un colpo solo.

Answer 6

In concatenamento funzione/metodo genitore restituisce un oggetto che viene quindi utilizzato dalla funzione/metodo figlio e le cose vanno in questo modo. In breve, lo jQuery o $ restituisce sé stesso (un oggetto) che consente il concatenamento.

È lo stesso meccanismo sottostante

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

Sembra che questo se è fatto con concatenamento

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

Answer 7

Ecco un esempio di condizionale concatenamento richiamata, come viene utilizzato sulla $.ajax jQuery funzione.

// 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

Uno dei modi per concatenamento, controllare demo.

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