I am writing a small module which will have several different aspects to it, all based around ajax calls. I want to allow the main ajax functions i.e beforeSend, success, complete etc (I am using jQuery) to be customizeable.
What is the best way to do this?
I currently have an options object in the module which can be extended with an options object passed to an init function. In here, I am passing a ‘callbacks’ object with nested ojects for each different type of action as in…
var insertCallbacks = {
before : function() {
},
success : function() {
},
error : function() {
},
complete : function() {
}
};
var updateCallbacks = {
before : function() {
},
success : function() {
},
error : function() {
},
complete : function() {
}
};
var callbacks = {
insert : addCallbacks,
update : removeCallbacks
};
MY_MODULE.init( {callbacks : callbacks} );
The problem is this then becomes a bit messy, testing for the existence of each of these methods on the ajax callbacks.
Can anyone offer any advice on a good/better pattern for this.
I would go with custom events rather than callbacks. So in your module you will have code like:
and in all parts outside of module (as well as inside if needed), you bind handlers (now they are callbacks):
Custom events in jQuery open doors to complex behaviors, or google any other article. Custom events will help you to keep code structured, and easier to test
ADD ON: with callbacks you need always to check if there is any, so you code becomes
improving your module functionality, and enhancing it, one day you get a situation that few callbacks should be passed for the same situation (e.g. two entities or UI components are interested in module ‘updating’)… It will make your job too difficult. With events you always have one code line
with no conditions to check if there is any handler attached (interested in an event), and you can have as many as needed handlers for the same event.