comment fonctionne le chaînage jquery ?

Question

Je ne demande pas quelle est la syntaxe appropriée pour le chaînage, je sais que cela pourrait être quelque chose comme:

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

Cependant, je suis vraiment curieux de comprendre le fonctionnement interne de celui-ci, pour autant que je sache, le chaînage est l'un des avantages par rapport à d'autres frameworks célèbres, mais cela nous fait beaucoup d'abstraction pour un programmeur novice comme moi, je suis sûr qu'il y a quelqu'un là ça peut me fournir une explication qui me permet de comprendre comment fonctionne le chaînage.

Merci!

Answer 1

Si vous avez un objet avec certaines méthodes, si chaque méthode renvoie un objet avec des méthodes, vous pouvez simplement appeler une méthode à partir de l'objet renvoyé.

 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();

DÉMO : http://jsfiddle.net/5kkCh/

Answer 2

Tout ce qu'il fait est de renvoyer une référence à this lorsque la méthode se termine. Prenons cet objet simple par exemple :

  var sampleObj = function()
 {
 };

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

Vous pourriez enchaîner ces appels toute la journée car vous renvoyez une référence à this :

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

jQuery effectue simplement une opération, puis renvoie this .

Answer 3

Fondamentalement, le premier appel de fonction $('myDiv') renvoie un objet jQuery, puis chaque appel suivant renvoie le même.

Librement,

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

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

Answer 4

return $this;

chaque fonction jQuery renvoie une instance de la classe jQuery, qui peut alors avoir des méthodes appelées dessus. vous pourriez le décomposer, et ce code aurait le même effet.

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