简单的事件监听处理函数
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层。
可以看下这个文章,写的也不错。