简单的事件监听处理函数

class evtEmiter {
  constructor() {
    this.handler = {};
  }
  on(evtName, callback) {
    if (!this.handler[evtName]) {
      this.handler[evtName] = [callback];
    } else {
      this.handler[evtName].push(callback);
    }
  }
  emit(evtName, ...params) {
    if (this.handler[evtName]) {
      this.handler[evtName].forEach(cb => {
        cb && cb(...params);
      });
    }
  }
  getHandler(evtName) {
    return this.handler[evtName];
  }
  hasHandler(evtName) {
    return this.handler[evtName] && this.handler[evtName].length;
  }
}

let evtHandler = new evtEmiter();
let user = "";
function fetchMock() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("fetch user ....");
      resolve({
        data: {
          name: "w3cdoc"
        }
      });
    });
  });
}
function fetchUser(param) {
  if (!user) {
    fetchMock("xxxxx/user", param).then(res => {
      user = res.data;
      evtHandler.emit("getUser", user);
    });
  } else {
    evtHandler.emit("getUser", user);
  }
}
function getUserInfo(param, cb) {
  if (!evtHandler.hasHandler("getUser")) {
    fetchUser(param);
  }
  evtHandler.on("getUser", cb);
}

console.log("get user ....");
getUserInfo({}, data => {
  console.log(data);
});

console.log("get user ....");
getUserInfo({}, data => {
  console.log(data);
});

简单的监听者模式实现的事件监听处理模式,处理了一个问题,多个模块都要调用获取用户信息的时候, 不用每次都请求,当然呢这是一个方案,还有其他的方案,比如做个接口请求的cache层。

可以看下这个文章,写的也不错。



请遵守《互联网环境法规》文明发言,欢迎讨论问题
扫码反馈

扫一扫,反馈当前页面

咨询反馈
扫码关注
返回顶部