javascript 使用事件路由对模块解耦

最近接手，维护起来非常吃力，如果要增加一个功能，需要从头改到尾，更让人崩溃的是，在这个页面中使用了不七八个全局变量进行状态标识。这个页面的规模已经可以算是一个中小应用的规模。对下调用底层话路OCX对象，进行各种话路功能的调用，并处理底层话路OCX的状态。对上则相应用户的操作，并更新UI。

举个例子，现在的情况是：

假如有AB两个模块，现在AB两个模块的状态是硬编码在一起的:

if(A.A1){
B.B1();
}
if(A.A2){
B.B2();
}

如果增加模块C，C的状态是由A的状态控制的，目前要实现C的功能则需要修改A模块的代码:

if(A.A1){
B.B1();
C.C1();
}
if(A.A2){
B.B2();
C.C2();
}

状态一多，模块一多，维护起来就是一个噩梦。

针对这种情况，使用事件机制，即使一个很简单的一种，也可以大大改观目前的这个状况。

我自己实现了一个简单版本的详细路由器：

(function(window){
var eventsQueue = {},
Component = function(){};
Component.prototype={
on:function(event,callback){
if(eventsQueue[event] && eventsQueue[event].push){
eventsQueue[event].push(callback);
}
else{
eventsQueue[event] = [callback];
}
return this;
},
emit:function(event,data){
if(eventsQueue[event] && eventsQueue[event].push){
for(var i=2; i<eventsQueue[event].length; i++){
eventsQueue[event][i].call(data);
}
}
return this;
}
};
window.Component = Component;
}(window));

这样模块间状态的依赖，通过事件通知进行触发，当增加新模块时，不用再修改原来的代码。

var A = new Component();
var B = new Component();
B.on("A1",function(){
B.B1();
});
B.on("A2",function(){
B.B2();
});

var C = new Component();
C.on("A1",function(){
C.C1();
});
C.on("A2",function(){
C.C2();
});

A.emit("A1");
A.emit("A2");

当然这个事件路由的代码很简单，目前有很多非常成熟的开源JS模块专门做事件这一块，比如：amplify 。