Download
Overview
OPS is a very easy to use JavaScript Event Manager.
Is based on a simple observer/observable design pattern and allows you to create custom Events.
You can then subscribe any number of listeners function that will run when your event is dispatched.
Up to here nothing new.
Many library allows you to create an event called 'onLoginSuccess' and dispatch it. What I find not portable is that I use many js library ( jquery,
Ext,Spry) and sometimes I use more libraries in the same project.
I like the idea to simply call events through a small repository that abstracts from any library on my project.
So my code is more easy to read, reusable and I do not have to learn a new event franmework for any library I decide to use...or when I am not using no one at all.
Usage
Create a Custom Event
Include the Ops.js library in your html page.
Create a new instance of the Event object and register it in the ops Events repository.
The event name is used to create a new OPS.Core.Publisher object that will be the ones that
will receive subscribtions and will deliver events when an event class with the same is dispatched.
/*Create an event class called 'myEvent'.
* We pass a callback function that will alert the value stored
* in the 'data' properties of the event object thrown.
* Arguments are :
* @name:string required
* @data:object
* @callback:function(ev:EventClass that is thrown)
*/
var myEvent = new OPS.Factory.Event('myEvent','',function(ev){
alert('This is the callback of the Event Class myEvent /n' +
'And this is the value from the source input :' + ev.getData());
}
);
/*The event must be registered in the OPS Events manager engine.
* This will possibly change in next release where creating an event
* will also register it automatically.
*/
OPS.Events.addEvent(myEvent);
Subscribe Listeners
You can now subscribe any number of listeners that will be called when an event class with the same name is thrown through the OPS dispatcher.
/*This is a simple listener that simply read the value that the event carry
* and write it on the document.Any listeners receive the event thrown as argument.
*/
var myFunction = function(ev){
document.getElementById('target').innerHTML = ev.getData();
}
/*Now I can subscribe myFunction to listen for myEvent
* Note that the function will be called when an Event with the same 'Name' properties
* of the registered event is thrown. An interface check that the event thrown has the required
* methods. ( setter/getter for properties name,data,callback)
*/
OPS.Events.subscribe( myFunction , myEvent );
/* Event can now be dispatched. We can dispatched the already craeted myEvent class
* or create a new class with the same name.
* In this case we add to the event 'data' properties the value of an html element
*/
$(document).ready(function(){
$('.dispatch').click(function(){
myEvent.setData(document.getElementById('source').value);
OPS.Events.dispatchEvent(myEvent);
});
});
Examples
Test it!
Input with id 'source'
Div Id 'target'
API
Coming soon...
Requirments and ChangeLog
| ChangeLog |
|