Quand utiliser JQuery.Callbacks?

Question

J'étais à la recherche par le biais de nouvelles choses ajoutées à jQuery 1.7 et j'ai vu qu'ils ont maintenant jQuery.Rappels() http://api.jquery.com/jQuery.Callbacks/.

La documentation vous montre comment utiliser jQuery.rappels() mais pas du tout applicable exemples de cas où j'ai envie de les utiliser.

Il semble que vous pouvez ajouter/supprimer des rappels à partir d'une liste des rappels et vous pouvez le faire en jQuery.rappels().feu(args), mais cela déclenche TOUS les rappels dans cette liste. Peut-être que je manque quelque chose, mais cela ne semble pas très utile.

Dans ma tête quand j'ai vu cette nouvelle fonctionnalité j'ai pensé que vous seriez capable de l'utiliser avec des paires clé/valeur. Qui serait alors de fournir un moyen simple de gérer les fonctions de rappel à un seul endroit dans votre application. Quelque chose comme

$.callbacks.add("foo", myFunction);

et puis par exemple si je voulais appeler ce rappel à la fin de ma fonction je pourrais faire quelque chose comme

$.callbacks().fire("foo", args);

Toutefois, il ne semble pas que vous pouvez déclencher spécifiques de rappels, vous pouvez seulement d'incendie à tous d'entre eux avec les arguments donnés ou aucun d'eux.

La chose la plus proche que j'ai vu était donné la capacité de donner la .le feu() la fonction d'un contexte, d'établir le "il" de la propriété

.fireWith(context, args)

mais cela n'aide pas vraiment non plus.

1. Suis-je l'incompréhension de la documentation?

2. Si c'est la fonctionnalité désirée quels sont applicables exemples où cela est utile.

Answer 1

Pour développer sur @Roquettes réponse un peu et de dissiper la confusion:

La raison pour laquelle on peut utiliser du jQuery $.Callbacks est à multiples facettes:

1. L'utilisateur a beaucoup de code dans une fonction et veut les diviser

2. Ils prennent que de l'information et de l'envoyer à travers le jQuery fonction de rappel qui permet alors à eux d'avoir partagé leur code dans les meilleurs morceaux maniables avec qui travailler avec.
   Donc (par exemple) si vous regardez @Rocket code:

   var clickCallbacks = $.Callbacks();
   
   clickCallbacks.add(function() { //one one function piece
       //parse and do something on the scope of `this`
       var c = parseInt(this.text(), 10);
       this.text(c + 1);
   });
   clickCallbacks.add(function(id) { //add a second non-related function piece
       //do something with the arguments that were passed
       $('span', '#last').text(id);
   });
   
   $('.click').click(function() {
       var $ele = $(this).next('div').find('[id^="clickCount"]');
       clickCallbacks.fireWith($ele, [this.id]); //do two separate but related things.
   });
   

3. Ce que vous pouvez maintenant ont est plusieurs de rappel de lots de la fonction qui vous permet maintenant d'appeler chaque fois que vous le jugez nécessaire, sans avoir à faire de nombreux changements tout au long de votre code.

Answer 2

Je peux constater que les rappels sont utiles lorsque vous mettez à jour différents éléments du DOM en utilisant la même méthode.

Voici un exemple ringard: http://jsfiddle.net/UX5Ln/

 var clickCallbacks = $.Callbacks();

clickCallbacks.add(function() {
    var c = parseInt(this.text(), 10);
    this.text(c + 1);
});
clickCallbacks.add(function(id) {
    $('span', '#last').text(id);
});

$('.click').click(function() {
    var $ele = $(this).next('div').find('[id^="clickCount"]');
    clickCallbacks.fireWith($ele, [this.id]);
});
 

Il met à jour le compteur de clics et le «dernier clic» lorsque vous cliquez sur quelque chose.

Answer 3

Un (presque) hors de la zone de jQuery Pub/Sub système

C'est à mon humble avis, l'application la plus intéressante, et depuis, il n'a pas été clairement indiqué dans les réponses (bien que certains ne font allusion à l'utilisation), je suis de l'ajouter à ce relativement ancien poste.

NB: L'utilisation est clairement indiqué, avec un exemple, dans le jQuery docs, mais je suppose qu'il a été ajouté après la question a été posté.

Pub/sub, aka le modèle observateur, est un modèle qui favorise le couplage lâche et unique responsabilité dans une application. Plutôt que d'avoir des objets d'appeler directement les méthodes d'autres objets, des objets, au lieu de s'abonner à une tâche spécifique ou de l'activité et sont informés quand il se produit. Pour une explication plus détaillée sur les avantages de l'utilisation de la Pub/Sub modèle, vous pouvez vérifier Pourquoi aurait-on utiliser le modèle de publication/abonnement (en JS/jQuery)?.

Bien sûr, cela a été possible avec des événements personnalisés à l'aide de trigger, .on() et .off(), mais je trouve que l' jQuery.Callbacks pour être beaucoup plus approprié à la tâche, la production plus propre code.

Voici l'exemple extrait du jQuery documentation:

var topics = {};

jQuery.Topic = function( id ) {
    var callbacks,
        method,
        topic = id && topics[ id ];

    if ( !topic ) {
        callbacks = jQuery.Callbacks();
        topic = {
            publish: callbacks.fire,
            subscribe: callbacks.add,
            unsubscribe: callbacks.remove
        };
        if ( id ) {
            topics[ id ] = topic;
        }
    }
    return topic;
};

Et un exemple d'utilisation:

// Subscribers
$.Topic( "mailArrived" ).subscribe( fn1 );
$.Topic( "mailArrived" ).subscribe( fn2 );
$.Topic( "mailSent" ).subscribe( fn1 );

// Publisher
$.Topic( "mailArrived" ).publish( "hello world!" );
$.Topic( "mailSent" ).publish( "woo! mail!" );

// Here, "hello world!" gets pushed to fn1 and fn2
// when the "mailArrived" notification is published
// with "woo! mail!" also being pushed to fn1 when
// the "mailSent" notification is published.

/*
output:
hello world!
fn2 says: hello world!
woo! mail!
*/

Answer 4

Il semble qu' $.Callbacks a commencé comme un détail d'implémentation: un moyen de gérer les listes de fonctions et d'appeler toutes les fonctions dans une liste donnée avec les mêmes arguments. Un peu comme le C#'s de multidiffusion délégués, avec des fonctionnalités supplémentaires, comme les drapeaux, vous pouvez passer à personnaliser la liste du comportement.

Un bon exemple peut être que jQuery utilise $.Callbacks en interne pour mettre en œuvre ses ready événement. bindReady() initialise une liste de rappel:

readyList = jQuery.Callbacks( "once memory" );

Remarque l' once et memory drapeaux, qui assurent la liste de rappel ne sera appelée qu'une fois, et que les fonctions ajoutées après que la liste a été appelée va être appelé immédiatement.

Ensuite, ready() , ajoute le gestionnaire spécifié à cette liste:

ready: function( fn ) {
    // Attach the listeners
    jQuery.bindReady();

    // Add the callback
    readyList.add( fn );

    return this;
}

Enfin, le rappel de la liste est déclenché lorsque le DOM est prêt:

readyList.fireWith( document, [ jQuery ] );

Tous les ready des gestionnaires sont appelés, dans le cadre d'un même document avec la même référence pour le mondial de l'objet jQuery. Ils ne peuvent être appelés pour cette fois, et d'autres gestionnaires passé de ready() sera appelé immédiatement à partir de là, l'ensemble de cette courtoisie d' $.Callbacks.

Answer 5

Je ne vois pas de mention spécifique de la définition de contexte, mais puisque vous pouvez transmettre un nombre arbitraire d'arguments, qui pourrait être utile. Vous pouvez également faire votre propre convention de passer un drapeau dans un premier argument et sont des auditeurs return false immédiatement si elles ne sont pas destinées à gérer le reste de la liste d'arguments.

J'ai rencontré des cas où quelque chose de ce genre ont été utiles, mais ils ont utilisé bind() et trigger() avec des événements personnalisés à la place. Imaginez un système de traitement de messages (un basé sur le web de la salle de chat ou e-mail du client) lorsque vous êtes à l'interrogation d'un service pour les nouveaux messages. Une fonction peut être à la fixation d'un nombre dans un intervalle ou de l'affichage d'un grognement quand il se passe quelque chose. Une autre pourrait être la mise à jour d'une grille. Avec des déclencheurs que vous auriez à déclencher l'événement pour chaque auditeur et de "dérouler" les arguments passés à partir de eventData, avec des rappels c'est juste un feu et vos auditeurs sont de simples fonctions javascript avec une simple liste d'arguments.

Les rappels n'est pas vraiment révolutionnaire, mais il va faire pour moins cher et plus propre code.