Saturday, October 11, 2008

Event driven web application - javascript event bus

I implemented a javascript event bus for asynchronized web application, and this article hasn't any relationship with Ajax and Dom events
Using Event bus benefit your web application development, such as:
  1. low coupling between moudles
  2. flexible event dispatcher
  3. partible bussiness logic
  4. consistent code style
This is a very sample demo code to guide you.
I have two components in my web app, one is a tree, another is a grid list, when current highlighted tree node was been deleted, the grid list should load it's next sibling node's data.

normally, we could write in tree.js:

//delete current hightlighted tree node
...
GridList.clear();
GridList.load(next_sibling_node.name)
...
but GridList was defined in grid.js, so tree and grid moudle was high coupled.

in new asynchronized web application. we can write in tree.js:

//delete current hightlighted tree node
EventBus.publish("tree-node-deleted", node);

and write in grid.js:

EventBus.subscribe("tree-node-deleted", function(argObj){
GridList.clear();
GridList.load(argObj.name)
});

I think this is a good experence in web development.

No comments: