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.

利用event bus来降低前台业务代码耦合度, Event bus - javascript, js实现

/*

demo:

var observer = function(paramObj){

alert("bomb event comes!" + paramObj);

}

//add business event listener

EventBus.subscribe("tree-node-change",observer);

//remove business event listener

//EventBus.unsubscribe("tree-node-change",observer);

//publish business event

EventBus.publish("tree-node-change",{oldName:"abc", newName:"cdef", id: 123});

*/

/*

ReadMe:

Goal: Using business event dispatcher to reduce code couple between web moudle,
目标: 为了尽可能的减少模块之间业务逻辑的耦合度, 而开发了这个消息总线, 主要用于业务逻辑的事件传递

使用规范: 每个js模块尽可能通过事件去通信, 减少模块之间的直接调用和依赖(耦合)

*/

var EventBus = function(){

var observers={};

var publish=function(eventName, argObj){

var obs = observers[eventName];

if(!obs){

return;

}

for(var i=0;i<obs.length;i++){

obs[i](argObj);

}

}

var subscribe=function(eventName, observer){

var obs = observers[eventName];

if(!obs){

obs=[];

observers[eventName]=obs;

}

obs.push(observer);

}

var unsubscribe=function(eventName, observer){

var obs = observers[eventName];

if(!obs){

return;

}

for(var i=0;i<obs.length;i++){

if(obs[i]==observer){

obs.splice(i,1);

break;

}

}

}

var unsubscribeByObserver=function(observer){

for(var eventName in observers){

removeByName(eventName, observer);

}

}

return {

publish:publish,

subscribe:subscribe,

unsubscribe:unsubscribe,

subscribeByObserver:unsubscribeByObserver

}

}();