Plugin jQuery pour l'architecture pilotée par les événements ?

Question

Existe-t-il des plugins jQuery pour l'architecture pilotée par les événements ?

Étape 1 : S'abonner

Les abonnés s'abonnent au gestionnaire d'événement au milieu, et transmettent une méthode de rappel, ainsi que le nom de l'événement qu'ils écoutent...

C'est-à-dire que les deux abonnés verts écouteront les événements p0. Et l'abonné bleu sera à l'écoute des événements p1.

---

Étape 2 : L'événement p0 est envoyé par un autre composant au gestionnaire d'événements.

1. Un événement p0 est envoyé au gestionnaire d'événements.
2. Le gestionnaire d'événement informe ses abonnés de l'événement, en appelant les méthodes de rappel qu'ils ont spécifiées lorsqu'ils se sont inscrits dans l'application Étape 1 : Abonnement.

Notez que l'abonné bleu n'est pas notifié car il n'était pas à l'écoute des événements p0.

---

Étape 3 : L'événement p1 est envoyé à un composant du gestionnaire d'événements.

L'événement p1 est déclenché par un autre composant

Comme précédemment, sauf que maintenant l'abonné bleu reçoit l'événement par le biais de son rappel et les deux autres abonnés verts ne reçoivent pas l'événement.

Images par leeand00, sur Flickr

Je n'arrive pas à en trouver une, mais je pense qu'ils l'appellent simplement autrement en Javascript/jquery.

Y a-t-il un nom pour ce modèle ? Comme il ne s'agit pas d'un simple éditeur/abonné, il doit s'appeler autrement, je pense.

Answer 1

Vous n'avez probablement pas besoin d'un plugin pour faire cela. Tout d'abord, le DOM lui-même est entièrement piloté par les événements. Vous pouvez utiliser la délégation d'événements pour écouter tous les événements sur le nœud racine (une technique que jQuery live utilise). Pour gérer les événements personnalisés qui ne sont pas nécessairement liés au DOM, vous pouvez utiliser un vieil objet JavaScript pour faire le travail. J'ai écrit un objet article de blog sur la création d'un distributeur central d'événements dans MooTools avec une seule ligne de code.

var EventBus = new Class({Implements: Events});

C'est tout aussi facile à faire en jQuery. Utilisez un objet JavaScript ordinaire qui agit comme un courtier central pour tous les événements. Tout objet client peut publier et s'abonner aux événements de cet objet. Voir ce lien question .

var EventManager = {
    subscribe: function(event, fn) {
        $(this).bind(event, fn);
    },
    unsubscribe: function(event, fn) {
        $(this).unbind(event, fn);
    },
    publish: function(event) {
        $(this).trigger(event);
    }
};

// Your code can publish and subscribe to events as:
EventManager.subscribe("tabClicked", function() {
    // do something
});

EventManager.publish("tabClicked");

EventManager.unsubscribe("tabClicked");

---

Ou si vous ne vous souciez pas d'exposer jQuery, alors utilisez simplement un objet vide et appelez bind y trigger directement sur l'objet enveloppé par jQuery.

var EventManager = {};

$(EventManager).bind("tabClicked", function() {
    // do something
});

$(EventManager).trigger("tabClicked");

$(EventManager).unbind("tabClicked");

Les wrappers sont simplement là pour masquer la bibliothèque jQuery sous-jacente afin que vous puissiez remplacer l'implémentation ultérieurement, si nécessaire.

C'est en fait le Publier/S'abonner ou le Modèle d'observateur et de bons exemples seraient le programme de Cocoa NSNotificationCenter classe, EventBus popularisé par Ray Ryan dans la communauté GWT, et plusieurs autres.

Answer 2

Bien qu'il ne s'agisse pas d'un plugin jQuery, Twitter a publié un cadre JavaScript appelé Vol qui vous permet de créer des architectures basées sur des composants, qui communiquent via des événements.

Flight est un framework JavaScript léger, basé sur des composants, développé par Twitter. Contrairement à d'autres frameworks JavaScript qui sont basés sur le modèle MVC, Flight fait correspondre le comportement directement aux nœuds du DOM.

Flight est indépendant de la manière dont les demandes sont acheminées ou de la bibliothèque de modèles que vous décidez d'utiliser. Flight applique une séparation stricte des préoccupations. Les composants dans Flight ne s'engagent pas directement les uns avec les autres.

Ils diffusent leurs actions sous forme d'événements et les composants abonnés à ces événements peuvent prendre des mesures en fonction de ceux-ci. Pour utiliser Flight, vous aurez besoin de l'ES5-shim et de jQuery ainsi que d'un chargeur AMD.

Flight - Un cadre JavaScript léger, basé sur des composants, de Twitter

Answer 3

Il y en a en fait deux :

• Écoutez (plus rapide) : http://plugins.jquery.com/project/Listen
• Intercepter (plus avancé) : http://plugins.jquery.com/project/Intercept

Answer 4

Cela pourrait-il servir de cadre léger pour le passage de messages ?

function MyConstructor() {
    this.MessageQueues = {};

    this.PostMessage = function (Subject) {
        var Queue = this.MessageQueues[Subject];
        if (Queue) return function() {
                                        var i = Queue.length - 1;
                                        do Queue[i]();
                                        while (i--);
                                    }
        }

    this.Listen = function (Subject, Listener) {
        var Queue = this.MessageQueues[Subject] || [];
        (this.MessageQueues[Subject] = Queue).push(Listener);
    }
}

alors vous pourriez le faire :

var myInstance = new MyConstructor();
myInstance.Listen("some message", callback());
myInstance.Listen("some other message", anotherCallback());
myInstance.Listen("some message", yesAnotherCallback());

et plus tard :

myInstance.PostMessage("some message");

répartirait les files d'attente

Answer 5

Cela peut être facilement réalisé en utilisant un nœud jQuery factice comme répartiteur :

var someModule = (function ($) {

    var dispatcher = $("<div>");

    function init () {
        _doSomething();
    }

    /**
        @private
    */
    function _doSomething () {
        dispatcher.triggerHandler("SOME_CUSTOM_EVENT", [{someEventProperty: 1337}]);
    }

    return {
        dispatcher: dispatcher,
        init: init
    }

}(jQuery));

var someOtherModule = (function ($) {

    function init () {
        someModule.dispatcher.bind("SOME_CUSTOM_EVENT", _handleSomeEvent)
    }

    /**
        @private
    */
    function _handleSomeEvent (e, extra) {
        console.log(extra.someEventProperty) //1337
    }

    return {
        init: init
    }

}(jQuery));

$(function () {
    someOtherModule.init();
    someModule.init();
})