简单的事件监听处理函数

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: "fed123"
        }
      });
    });
  });
}
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);
});

 

简单的监听者模式实现的事件监听处理模式,处理了一个问题,多个模块都要调用获取用户信息的时候

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

知识共享署名4.0国际许可协议,转载请保留出处; 部分内容来自网络,若有侵权请联系我:前端学堂 » 简单的事件监听处理函数

赞 (1) 打赏

评论 0

如果对您有帮助,别忘了打赏一下宝宝哦!

支付宝扫一扫打赏

微信扫一扫打赏