web-dev-qa-db-fra.com

comment fonctionne la méthode de promesse de jquery?

Je ne comprends pas vraiment ce que sont delegate et promise.

Selon les documents -

  • delegate lierait un sélecteur et un événement à une sorte de conteneur d'habillage qui pourra être réutilisé ultérieurement pour les éléments actuels et futurs.
  • promise() remapperait les choses à leur première limite si tout ce qui venait d'être chargé correspond. Peut-être que je ne comprends pas vraiment cette méthode de promesse.

Que se passe-t-il si le wrapper est toujours là, mais que le contenu du conteneur de wrapper a changé et/ou rechargé via Ajax? Pourquoi les événements ne se déclenchent-ils pas ou ne fonctionnent-ils pas comme ils le seraient la première fois qu'ils sont liés?

Et oui, je suis allé sur la page des documents, je ne comprends tout simplement pas leurs explications.

ajaxjqueryjquery-deferred
62
robx

Je suis un peu confus par cette question. Je pense que c'est parce que vous êtes confondu par promise et delegate. Ce sont en fait des fonctionnalités complètement indépendantes de jQuery. Je vais vous expliquer chacun séparément:

delegate

delegate est une fonctionnalité de jQuery qui a été introduite dans jQuery 1.4.2. (C'est une meilleure approche de la fonctionnalité live qui a été ajoutée dans jQuery 1.3). Il résout un problème particulier qui vient avec la modification du DOM, et en particulier avec AJAX appels.

Lorsque vous liez un gestionnaire d'événements, vous le liez à une sélection. Vous pouvez donc faire $('.special').click(fn) pour lier un gestionnaire d'événements à tous les membres de la classe special. Vous vous liez à ces éléments, donc si vous supprimez ensuite la classe de l'un de ces éléments, l'événement sera toujours déclenché. Inversement, si vous ajoutez la classe à un élément (ou ajoutez un nouvel élément dans le DOM), l'événement ne sera pas lié.

Il existe une fonctionnalité de Javascript qui atténue ce qu'on appelle le "bullage d'événement". Lorsqu'un événement est déclenché, le navigateur notifie d'abord l'élément à l'origine de l'événement. Ensuite, il remonte l'arborescence DOM et notifie chaque élément ancêtre. Cela signifie que vous pouvez lier un gestionnaire d'événements sur un élément en haut de l'arborescence DOM et les événements déclenchés sur tous les éléments enfants (même ceux qui n'existaient pas lorsque le gestionnaire était lié).

delegate est l'implémentation de jQuery. Tout d'abord, vous sélectionnez un élément parent. Ensuite, vous spécifiez un sélecteur - le gestionnaire ne sera exécuté que si l'élément d'origine correspond à ce sélecteur. Ensuite, vous spécifiez un type d'événement, tel que click, submit, keydown, tout comme avec bind . Enfin, vous spécifiez le gestionnaire d'événements.

$('#containingElement').delegate('a.special', 'click', function() {
    alert('This will happen on all links with the special class');
});

promise

promise est un autre ajout relativement récent au jeu de fonctionnalités jQuery. Il fait partie du concept Deferred introduit dans jQuery 1.5. (Je pense que la similitude dans le son entre "différé" et "délégué" est probablement la source de confusion.) C'est une façon d'éliminer les complications du code asynchrone. Le meilleur exemple de ceci est avec AJAX appels, comme l'objet retourné par $.ajax est un objet Deferred. Par exemple:

$.ajax({
    url: 'somepage.cgi',
    data: {foo: 'bar'}
}).done(function() {
    // this will be run when the AJAX request succeeds
}).fail(function() {
    // this will be run when the AJAX request fails
}).always(function() {
    // this will be run when the AJAX request is complete, whether it fails or succeeds
}).done(function() {
    // this will also be run when the AJAX request succeeds
});

C'est donc à bien des égards les mêmes que les gestionnaires de réussite de liaison dans le $.ajax appel, sauf que vous pouvez lier plusieurs gestionnaires et les lier après l'appel initial.

Une autre fois où il serait utile de traiter de manière asynchrone est avec les animations. Vous pouvez fournir des rappels aux fonctions, mais il serait plus judicieux de le faire avec une syntaxe similaire à l'exemple AJAX que j'ai fourni ci-dessus).

Dans jQuery 1.6, cette fonctionnalité a été rendue possible et promise fait partie de cette implémentation. Vous appelez promise sur une sélection jQuery et vous obtiendrez un objet auquel vous pourrez lier des gestionnaires d'événements lorsque toutes les animations de l'objet seront terminées.

Par exemple:

$('div.special').fadeIn(5000).promise().then(function() {
    // run when the animation succeeds
}).then(function() {
    // also run when the animation succeeds
});

Encore une fois, cela est similaire en effet aux méthodes traditionnelles, mais cela ajoute de la flexibilité. Vous pouvez lier les gestionnaires ultérieurement et vous pouvez en lier plusieurs.

Sommaire

Fondamentalement, il n'y a pas de relation significative entre delegate et promise, mais ce sont deux fonctionnalités utiles dans jQuery moderne.

199
lonesomeday