发布订阅模式
作者:互联网
本文的创作启发来自于Vue中的EventBus(也有人叫中央事件总线),全文系博主原创,转载请标明出处,如有理解不当之处欢迎各位大佬赐教,谢谢!
本文代码秉承发布订阅模式的思想模拟实现了 Vue中的EvnetBus
那么,上代码!
JS版
class Subscription {
subscriptionStack = {};
on(eventName, callBack) {
if (this.subscriptionStack[eventName]) {
this.subscriptionStack[eventName].callBacks.push(callBack);
callBack(this.subscriptionStack[eventName].value);
} else {
console.error("该接口未注册,请先通过emit方法注册接口,再来监听")
return;
}
}
emit(eventName, value) {
if (this.subscriptionStack[eventName]) {
Reflect.set(this.subscriptionStack[eventName], 'value', value);
} else {
const origin = {
value,
callBacks: []
}
const proxyHandle = {
get(origin, key) {
return origin[key];
},
set(origin, key, value) {
if (key == 'value' && origin.callBacks.length) {
origin.callBacks.forEach(callBack => {
callBack(value);
})
}
}
}
this.subscriptionStack[eventName] = new Proxy(origin, proxyHandle);
}
}
}
Ts版
interface SubscriptionClassInterface {
subscriptionStack: object;
on(eventName: string, callBack: (val: any) => void): void;
emit(eventName: string, value: any): void;
}
class Subscription implements SubscriptionClassInterface {
subscriptionStack: object;
on: (eventName: string, callBack: (val: any) => void) => void;
emit: (eventName: string, value: any) => void;
constructor() {
this.subscriptionStack = {};
this.on = (eventName: string, callBack: (val: any) => void) => {
if (this.subscriptionStack[eventName]) {
this.subscriptionStack[eventName].callBacks.push(callBack);
callBack(this.subscriptionStack[eventName].value);
} else {
console.error("该接口未注册,请先通过emit方法注册接口,再来监听");
return;
}
};
this.emit = (eventName: string, value: any) => {
if (this.subscriptionStack[eventName]) {
Reflect.set(this.subscriptionStack[eventName], "value", value);
} else {
const origin = {
value,
callBacks: [],
};
const proxyHandle = {
get(origin, key): any {
return origin[key];
},
set(origin, key, value): any {
if (key == "value" && origin.callBacks.length) {
origin.callBacks.forEach((callBack) => {
callBack(value);
});
}
},
};
this.subscriptionStack[eventName] = new Proxy(origin, proxyHandle);
}
};
}
}
使用方法:
第一步、
# 创建实例
let s = new Subscription();
第二步、
# 发布事件
s.emit(事件名,值)
# 举个栗子:
s.emit('change',20);
第三步、
# 订阅事件
s.on(事件名,回调函数)
> 此处的事件名一定要和emit中的对应上
# 举个栗子:
s.on('change',function(val){
//emit中传入的值在Val中接收到
//这里可以写入相应的逻辑代码
//每当再次调用emit这个回调函数会被自动调用,完成响应式
})
------------------------- End -------------------------
标签:subscriptionStack,订阅,value,eventName,callBack,发布,模式,emit,origin 来源: https://www.cnblogs.com/fuyouplus/p/15175412.html