javascript - template - github backbone

jQuery plugin para Event Driven Architecture?

Question

¿Hay algún plugin jQuery de Event Driven Architecture?

Paso 1: Suscribirse

Los suscriptores se suscriben al controlador de eventos en el medio y pasan un método de devolución de llamada, así como el nombre del evento que están escuchando ...

Es decir, los dos suscriptores verdes escucharán los eventos p0. Y el suscriptor azul estará escuchando eventos p1.

Paso 2: El evento p0 es disparado por otro componente al controlador de eventos

1. Un evento p0 se dispara al controlador de eventos
2. El controlador de eventos notifica a los suscriptores del evento, llamando a los métodos de devolución de llamada que especificaron cuando se suscribieron en el Paso 1: Suscripción.

Tenga en cuenta que no se notifica al suscriptor azul porque no estaba escuchando eventos p0.

Paso 3: el evento p1 se activa un componente al controlador de eventos

El evento p1 es disparado por otro componente

Al igual que antes, excepto que ahora el suscriptor azul recibe el evento a través de su devolución de llamada y los otros dos suscriptores verdes no reciben el evento.

Imágenes de leeand00, en Flickr

Parece que no puedo encontrar uno, pero creo que solo lo llaman algo más en Javascript / jquery

¿También hay un nombre para este patrón? Como no es solo un editor / suscriptor básico, tiene que llamarse otra cosa que yo pensaría.

Answer 1

¿Podría esto servir como un marco de paso de mensajes ligeros?

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

entonces podrías hacer

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

y después:

myInstance.PostMessage("some message");

enviaría las colas

Answer 2

Aunque no es un complemento de jQuery, Twitter lanzó un marco de JavaScript llamado Flight que le permite crear arquitecturas basadas en componentes, que se comunican a través de eventos.

Flight es un framework de JavaScript ligero y basado en componentes de Twitter. A diferencia de otros marcos de JavaScript que se basan en el patrón MVC, el comportamiento de los mapas de vuelo directamente a los nodos DOM.

Flight es independiente de cómo se enrutan las solicitudes o qué biblioteca de plantillas decide utilizar. El vuelo impone una estricta separación de preocupaciones. Los componentes en vuelo no se relacionan entre sí directamente.

Transmiten sus acciones como eventos y los componentes suscritos a esos eventos pueden realizar acciones basadas en ellos. Para utilizar Flight, necesitará el ES5-shim y jQuery junto con un cargador AMD.

Flight

Answer 3

En realidad, hay dos de ellos:

• Escuche (más rápido): http://plugins.jquery.com/project/Listen
• Interceptar (más avanzado): http://plugins.jquery.com/project/Intercept

Answer 4

Esto se puede lograr fácilmente usando un nodo jQuery ficticio como despachador:

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

Answer 5

He usado OpenAjax Hub para sus servicios de publicación / suscripción. No es un complemento de jQuery, sino un módulo de JavaScript independiente. Puede descargar y usar la implementación de referencia desde SourceForge. Me gusta la nomenclatura jerárquica de temas y el soporte para suscribirse a múltiples temas utilizando la notación comodín.

Answer 6

Probablemente no necesites un complemento para hacer esto. En primer lugar, el DOM en sí mismo es completamente impulsado por eventos. Puede usar la delegación de eventos para escuchar todos los eventos en el nodo raíz (una técnica que usa jQuery live). Para manejar eventos personalizados que no estén relacionados con DOM, puede usar un objeto JavaScript antiguo y sencillo para realizar el trabajo. Escribí una publicación de blog sobre la creación de un despachador de eventos central en MooTools con solo una línea de código.

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

Es igual de fácil de hacer en jQuery también. Utilice un objeto JavaScript normal que actúe como un agente central para todos los eventos. Cualquier objeto cliente puede publicar y suscribirse a eventos en este objeto. Vea esta question relacionada.

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

O si no te importa exponer jQuery, simplemente utiliza un objeto vacío y llama a bind y trigger directamente en el objeto envuelto jQuery.

var EventManager = {};

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

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

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

Los envoltorios simplemente están allí para ocultar la biblioteca jQuery subyacente para que pueda reemplazar la implementación más adelante, si es necesario.

Esto es básicamente el patrón Publish/Subscribe o The Observer , y algunos buenos ejemplos serían la clase NSNotificationCenter de Cocoa, el patrón EventBus popularizado por Ray Ryan en la comunidad GWT, y muchos otros.

Answer 7

Un desarrollo reciente es github.com/cujojs/msgs "Programación orientada a mensajes para JavaScript. Inspirado por Spring Integration". También es compatible con la comunicación a través de WebSockets.

msgs.js aplica el vocabulario y los patrones definidos en el libro ''Enterprise Integration Patterns'' a JavaScript extendiendo la programación orientada a la mensajería hacia el navegador y / o hacia el lado del servidor JavaScript. Los patrones de mensajería desarrollados originalmente para integrar sistemas dispares débilmente acoplados, se aplican también a los módulos acoplados libremente en un solo proceso de aplicación.

[...]

Entornos probados:

• Node.js (0.6, 0.8)
• Cromo (estable)
• Firefox (estable, ESR, debería funcionar en versiones anteriores)
• IE (6-10)
• Safari (5, 6, iOS 4-6, debería funcionar en versiones anteriores)
• Opera (11, 12, debería funcionar en versiones anteriores)