技术&生活

说明：本文是对文章：http://web302.com/2010/08/js-function-of-several-useful/的补充

很多的web应用都是基于事件驱动的，比如tab切换。有两个选项卡，通过click或者mouseover事件来驱动展现情况。类似这种应用场景数不胜数。像这种应用是给dom对象绑定click事件就可以完成，非常之简便。

像上面那个例子，就是典型的事件驱动的应用场景。现在有个社区型的应用场景：有一个用户中心页面，首先从服务器拉取用户的个人信息，然后再根据用户的信息分表去拉取用户的好友列表，站内信个数等信息。

常规处理：

这个很简单，异步拉取用户信息，拉取成功之后就分别执行对应的方法，如拉取好友列表，拉取站内信个数等。下面贴下伪代码：

ajax('/getuser?uid=123',function(response){
    loadFriend(response);//拉取好友列表
    loadMsgNum(response);//拉取消息个数
    ...............
});

这个处理方式没有任何问题。现在假设某台需求有变更，还要拉取用户的动态信息，现在是不是又要更改这个回调，加上loadDt(response)。假设需求又有变动，拉取好友从loadFriend函数改为loadFriendTwo()。想象一下，如果处理好友列表和拉取个人信息的模块不是同一个职员在处理，那么每次改动都要涉及到两个人的改动，也许更多。而且两者之间的耦合性也是非常之强的！有没有更好的处理方式吗？

现在回到本文开头提到的事件处理。如果有个DOM，当用户点击这个DOM之后，A同事要处理一些事情，B同事也要处理一些事情。那么很自然的A同事监听这个DOM的CLICK事件，B同事也是可以注册自己的事件监听，这样是不是没有任何的耦合？

事件处理：

这样我们就可以用事件的方式来处理这个应用场景，让各个模块注册自己的监听回调，等拉取个人信息成功之后就触发这个事件。下面看第二种方式的伪代码：

function user(uid){
   this.uid=uid;
}
event(user,EventSource);//让user继承EventSource。
user.prototype.load=function(){
         var that=this;
         ajax("/getuser?uid="+this.uid,function(response){
                  that.fireEvent('onUserReady',response);
         });
}
 
var userObj=new user(123);
 
//加载好友模块开始
userObj.addEventListener(userObj,'onUserReady',loadFriend);
function loadFriend(that,event,response){
 
}
//加载好友模块结束
 
 
//加载消息个数模块
userObj.addEventListener(userObj,'onUserReady',loadMsgNum);
function loadMsgNum(that,event,response){
 
}
//结束

如果以后有别的业务逻辑就继续增加监听而不是硬编码的回调，大大降低了耦合性。 阅读全文…