plug-in jQuery per Event Driven Architecture?

Question

Ci sono plugin jQuery di Event Driven Architecture?

Fase 1: Iscrizione

Gli abbonati iscriversi al gestore di eventi nel mezzo, e passano in un metodo di callback, così come il nome dell'evento che stanno ascoltando per ...

ie I due abbonati verdi ascolteranno gli eventi p0. E l'utente blu ascolterà per eventi p1.

---

Fase 2: L'evento p0 è sparato da un altro componente al gestore di eventi

1. Un evento p0 è sparato alla
2. Il gestore di eventi Event Handler notifica è abbonati dell'evento, chiamando i metodi di callback che hanno specificato quando si sono iscritti in Passaggio 1: Sottoscrizione.

Si noti che l'utente blu non viene informato perché non stava ascoltando eventi p0.

---

Fase 3: L'evento P1 è sparato un componente per la gestione degli eventi

L'evento p1 è sparato da un altro componente

Proprio come prima, tranne che ora l'azzurro il sottoscrittore riceve l'evento tramite il suo callback e gli altri due abbonati verdi non ricevono l'evento.

Images by leeand00, on Flickr

io non riesco a trovarne uno, ma la mia ipotesi è che lo chiamano semplicemente qualcosa di diverso in Javascript/jQuery

è anche lì un nome per questo modello? Perché non è solo un editore/sottoscrittore di base, deve essere chiamato qualcos'altro che penserei.

Answer 1

Probabilmente non hanno bisogno di un plugin per farlo. Prima di tutto, il DOM stesso è interamente guidato dagli eventi. È possibile utilizzare la delega degli eventi per ascoltare tutti gli eventi sul nodo principale (una tecnica utilizzata da jQuery Live). Per gestire anche eventi personalizzati che potrebbero non essere correlati a DOM, è possibile utilizzare un semplice oggetto JavaScript vecchio per eseguire il lavoro. Ho scritto uno blog post sulla creazione di un dispatcher di eventi centrale in MooTools con una sola riga di codice.

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

Anche in jQuery è altrettanto facile. Utilizzare un normale oggetto JavaScript che funge da intermediario centrale per tutti gli eventi. Qualsiasi oggetto client può pubblicare e sottoscrivere eventi su questo oggetto. Vedi questo relativo 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"); 

---

O se non si cura di esporre jQuery, quindi è sufficiente utilizzare un oggetto vuoto e chiamare bind e trigger direttamente sul jQuery avvolto oggetto.

var EventManager = {}; 

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

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

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

Gli involucri sono semplicemente lì per nascondere la libreria jQuery sottostante in modo da poter sostituire l'implementazione in seguito, se necessario.

Questo è fondamentalmente il Publish/Subscribe o Observer pattern, e alcuni buoni esempi sarebbe la classe di cacao NSNotificationCenter, EventBus modello popolare da Ray Ryan nella comunità GWT, e molti altri.

Answer 2

Ci sono in realtà due di loro:

• Listen (più veloce): http://plugins.jquery.com/project/Listen
• Intercept (più avanzato): http://plugins.jquery.com/project/Intercept

Answer 3

Ho usato il OpenAjax Hub per i suoi servizi di pubblicazione/sottoscrizione. Non è un plugin jQuery, ma un modulo JavaScript autonomo. È possibile scaricare e utilizzare reference implementation da SourceForge. Mi piace la denominazione dell'argomento gerarchico e il supporto per la sottoscrizione a più argomenti utilizzando la notazione jolly.

Answer 4

Potrebbe servire come struttura di passaggio di messaggi leggeri?

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

allora si potrebbe fare:

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

e versioni successive:

myInstance.PostMessage("some message"); 

sarebbe spedire le code

Answer 5

Questo può facilmente essere realizzato utilizzando un nodo fittizio jQuery come un dispatcher :

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 6

Sebbene non sia un plug-in jQuery, Twitter ha rilasciato un framework JavaScript chiamato Flight che consente di creare architetture basate su componenti, che comunicano tramite eventi.

Flight è un framework JavaScript leggero e basato su componenti di Twitter. A differenza di altri framework JavaScript basati sul pattern MVC, il comportamento delle mappe di volo direttamente ai nodi DOM.

Il volo è agnostico sul modo in cui le richieste vengono instradate o quale libreria di modelli si decide di utilizzare. Il volo impone una rigorosa separazione delle preoccupazioni. I componenti in volo non si impegnano direttamente.

Trasmettono le loro azioni come eventi e quelle componenti sottoscritte a tali eventi possono intraprendere azioni basate su di essi. Per utilizzare Flight, avrai bisogno di ES5-shim e jQuery insieme a un caricatore AMD.

Flight - A Lightweight, Component-Based JavaScript Framework From Twitter

Answer 7

Un recente sviluppo è msgs.js "Messaggio di programmazione orientata per JavaScript. Ispirato integrazione Primavera".Supporta anche la comunicazione tramite WebSockets.

msgs.js applica il vocabolario e gli schemi definiti nel libro "Modelli di integrazione aziendale" a JavaScript che estende la programmazione orientata alla messaggistica nel browser e/o sul lato server JavaScript. I modelli di messaggistica originariamente sviluppati per integrare i sistemi disparati liberamente accoppiati, si applicano altrettanto bene ai moduli accoppiati liberamente all'interno di un singolo processo applicativo.

[...]

ambienti sottoposti a test:

• Node.js (0.6, 0.8)
• Chrome (stabile)
• Firefox (stabile, ESR, dovrebbero lavorare in precedenza versioni)
• IE (6-10)
• Safari (5, 6, iOS 4-6, dovrebbe funzionare nelle versioni precedenti)
.210
• Opera (11, 12, dovrebbe funzionare nelle versioni precedenti)