Jak działa łańcuchowanie jquery?

Question

Nie pytam, co jest właściwe składnia łańcuchowym, wiem, to może być coś takiego:

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

Jednak jestem bardzo ciekawy, aby zrozumieć wewnętrzne funkcjonowanie niego, o ile wiem, jest łańcuchowym jedna z zalet przeciwko innym słynnym frameworkom, ale to dla nas wiele abstrakcji dla początkującego programisty takiego jak ja, jestem pewien, że jest ktoś, kto może mi dostarczyć wyjaśnienia, które pozwoli mi zrozumieć, jak działa łańcuchowanie.

Dzięki!

Answer 1

Jeśli masz obiekt z pewnymi metodami, jeśli każda metoda zwraca obiekt metodami, możesz po prostu wywołać metodę z zwróconego obiektu.

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

Zasadniczo pierwsze wywołanie funkcji $('myDiv') zwraca obiekt jQuery, a następnie każde następne wywołanie zwraca tę samą.

Luźno,

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

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

Answer 3

Wszystko, co robi powraca odniesienie do this kiedy zakończy metoda. Weź ten prosty przedmiot na przykład:

var sampleObj = function() 
{ 
}; 

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

Mogłabyś łańcuch takie rozmowy przez cały dzień, bo wrócisz odniesienie do this:

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

jQuery po prostu wykonuje operację, po czym powraca this.

Answer 4

return $this; 

każda funkcja jQuery zwraca wystąpienie klasy jQuery, która może wtedy metod zwanych na nim. możesz go zepsuć, a ten kod będzie miał taki sam efekt.

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

Answer 5

Chodzi o to, że funkcja musi zostać obliczona jako funkcja "macierzysta". Np.

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

musi ocenić na:

foo().test(); 

tak, że można wywołać inną funkcję foo(). Aby to zrobić, można return this:

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

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

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

Następnie

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

I z tego powodu:

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

Więc dlatego something.bar() ocenia się something można natychmiast wezwać drugą funkcję za jednym razem.

Answer 6

W łańcuchowaniu funkcja/metoda rodzica zwraca obiekt, który jest następnie używany przez funkcję/metodę potomną, a rzeczy idą w taki sposób. W skrócie: jQuery lub $ zwraca się (obiekt), który pozwala na łańcuchowanie.

Jest to ten sam mechanizm poniżej

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

Wygląda na to, czy odbywa się to z łańcuchowym

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

Answer 7

Oto przykład warunkowego zwrotnej łańcuchowych, jak jest wykorzystywany na $.ajax jQuery funkcjonować.

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

Jednym ze sposobów łączenia, sprawdź demo.

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