JavaScript设计模式之观察者模式

观察者模式，也叫订阅-发布模式

顾名思义，就是订阅某些功能，然后在适当的时机执行这些功能

订阅，就是把几个函数推入数组中待用；
发布，就是把缓存在数组中的那一坨函数列队执行。

根据以上描述，写出如下的代码：
最简单的一个订阅-发布者模式

var event = {
  eventList:{},
  listen:function(key,fn){
    if(!this.eventList[key]){
      this.eventList[key] = [];
    }
    this.eventList[key].push(fn);
  },
  remove:function(key,fn){
    var fns = this.eventList[key];
    if(!fns){
      return false;
    }
    if(!fn){
      fns && (fns.length=0);
    }else{
      for(var i=0;i

这段代码中, listen就是订阅（缓存），trigger就是发布（执行）。

---

使用场景

1. ajax解耦

ajax请求有个比较很闹心的问题，就是层级回调。比如：

有个页面，需要调用三个数据接口。
第一个是login登录接口.
第二个是根据登录接口返回的id，调取头像接口.
第三个是根据登录接口返回的id，调取消息列表接口。

一般情况下，我知道你会这么写：

$.ajax({
  url:'http://ajax.login.com',
  dataType:'json',
  success:function(data){
    getAvatar(data.id);
    getMsg(data.id);
    ....
  }
});

这样写虽然没问题，但却不容易维护。因为耦合性太大，接口调用都成了拴在一条绳子上的蚂蚱，一扯就是一坨

"订阅-发布"模式实现, 当登录工作完成后会发布，触发缓存数组中的函数执行。完整代码如下