web-dev-qa-db-fra.com

comment fonctionne l'enchaînement jQuery?

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

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

Cependant, je suis vraiment curieux de comprendre son fonctionnement interne. Pour autant que je sache, l'enchaînement est l'un des avantages par rapport à d'autres frameworks célèbres, mais cela nous prive de beaucoup d'abstraction pour un programmeur novice comme moi, je suis sûr là, cela peut me fournir une explication qui me permet de comprendre comment fonctionne le chaînage.

Merci!

javascriptjqueryframeworks
50
isJustMe

Si vous avez un objet avec certaines méthodes, si chaque méthode retourne 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();

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

60
user113716

Il ne fait que renvoyer une référence à this à la fin de la méthode. Prenons cet objet simple par exemple:

 var sampleObj = function()
 {
 };

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

Vous pouvez chaî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. 

25
Tejs

Le premier appel à la 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;
}
6
Daniel A. White
return $this;

chaque fonction jQuery renvoie une instance de la classe jQuery, à laquelle des méthodes peuvent ensuite être appelées. 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');
4
GSto

Le fait est qu'une fonction doit être évaluée à la fonction "parent". Donc, par exemple.

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

doit évaluer pour:

foo().test();

afin que vous puissiez appeler une autre fonction sur foo(). Pour ce faire, vous pouvez return this:

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

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

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

Ensuite,

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

Et pour cette raison:

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

Donc, parce que something.bar() est évalué à something, vous pouvez appeler immédiatement la deuxième fonction en une fois.

4
pimvdb

En chaînant la fonction/méthode parent, retourne un objet qui est ensuite utilisé par la fonction/méthode enfant (s), et les choses se passent ainsi. En bref, la variable jQuery ou $ se retourne elle-même (un objet), ce qui permet le chaînage. 

C'est le même mécanisme ci-dessous

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

Cela ressemble à ceci si c'est fait avec chaînage 

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

Voici un exemple d’enchaînement de rappel conditionnel, tel qu’il est utilisé dans la fonction $.ajax jQuery. 

// 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;
}
0
Matthew.Lothian

Une des manières d’enchaîner, vérifiez demo .

test("element").f1().f2().f3()
0
Shoib Mohammed A

Le chaînage permet de connecter plusieurs événements et fonctions dans un sélecteur.

Pour exécuter plusieurs commandes jQuery, l'une après l'autre, sur le même ou les mêmes éléments. Généralement, le chaînage utilise les fonctions intégrées de jQuery qui accélèrent un peu la compilation. 

Cela rend votre code court, facile à gérer et donne de meilleures performances,

Eaxample

Sans chaînage

$(document).ready(function(){
    $('#dvContent').addClass('dummy');
    $('#dvContent').css('color', 'red');
    $('#dvContent').fadeIn('slow');
});

Avec chaînage

$(document).ready(function(){
    $('#dvContent').addClass('dummy')
          .css('color', 'red')
          .fadeIn('slow');     
});

Remarque: La chaîne commence de gauche à droite. Donc, la plupart des gens seront appelés en premier et ainsi de suite.

0
Srikrushna Pal