1. Development
<script type="text/javascript" src="dispatcher.js"></script>
2. Production
<script type="text/javascript" src="dispatcher.min.js"></script>
Basically the default javascript doesn't have a simple way on listening / handling custom events, it doesn't have a way to bind or put custom parameters for custom usage, Luckily the dispatcher class provides this functionality with custom success and fail handler for async process. Below will show on how simple it is to handle custom events using dispatcher object.
Figure 1. Initialization
var dispatcher = Dispatcher();
Figure 2. Listening to Events
dispatcher.on('test-event', function([params...], success, fail) {
console.log('Some Test Event');
})
Figure 3. Setting event handler priority
dispatcher.on('test-event', handler, true, [success, fail]);
NOTE Priority Handler will always be placed on top of other current handlers of the given event.
Figure 4. Listening to Events with Success and Fail Handler
dispatcher.on('test-event', function([params...], success, fail){
setTimeout(function() {
// call success callback
success(1, 2, 3);
}, 1000);
setTimeout(function() {
// call the fail callback
fail(1, 2, 3);
}, 2000);
},
function([params...]) {
// ... do some stuff
},
function([params...]) {
// ... do some stuff
});
Figure 5. Removing Event Handler
Remove specific handler by passing handler function:
var handler = function() {};
dispatcher.on('test', handler);
// remove the given handler based on the original
// handler function signature...
dispatcher.off('test', handler);
Removing all handlers for the given event:
dispatcher.off('test');
NOTE Passing the original handler function is required when removing specific handler from the given event, the dispatcher will look for it's matching guid from the list of event handlers given the event name.
Figure 6. Dispatching Events
dispatcher.dispatch('test', [params...]);
Figure 7. Putting it all together
var load = function() {
console.log('Load Handler');
};
dispatcher
.on('load', load)
.on('request', function(url, success, fail) {
var request = Request();
request.get(url)
.success(function(response) {
success(response);
})
.fail(function(response) {
fail(response);
});
},
// success callback
function(response) {
console.log('Success Response: ' + response);
},
// fail callback
function(response) {
console.log('Fail Response: ' + response);
})
.on('event-not-useful', function() {
})
.on('event-not-useful', function() {
});
// remove event
dispatcher.off('event-not-useful');
// remove load event by handler
dispatcher.off('load', load);
// dispatch request event
dispatcher.dispatch('request', '/some-url');
MIT