/**
* 发布-订阅 实现
*/
class PubSub {
constructor (){
// 订阅的事件对象
this.events = {}
}
// 发布
publish(eventName, ...data){
if(this.events[eventName]){
// 遍历执行该事件的所有订阅 回调
this.events[eventName].forEach(cb => {
// 继承订阅的回调方法,并把发布的参数传过去,同时执行其回调方法
cb.call(this, ...data)
});
}
}
// 订阅
substribe(eventName, callback){
// 可能有多个地方订阅同一个事件,所以每一个事件对象用数组保存
if(this.events[eventName]){
this.events[eventName].push(callback)
}else{
this.events[eventName] = [callback]
}
}
// 删除订阅
unSubstribe(eventName, callback){
if(this.events[eventName]){
this.events[eventName] = this.events[eventName].filter((cb)=>{
// 在当前事件数组中,剔除出事件回调和callback相同的订阅
return cb !== callback;
})
}
}
}
// 发布-订阅 调用
var pdd = new PubSub();
console.log('start');
// 订阅回调 1
function subCallback(data, name){
console.log('订阅到:age=' + data + name)
}
// 订阅回调 2
function subCallback2(data, name){
console.log('订阅2:age=' + data + name)
}
setTimeout(function(){
console.log('=====发布:age => 21=====')
pdd.publish('age', 21, 'hwb');
},1000)
console.log('订阅:age')
pdd.substribe('age', subCallback);
pdd.substribe('age', subCallback2);
setTimeout(function(){
console.log('=====发布:age => 25=====')
pdd.publish('age', 25, 'hwb');
},2000)
setTimeout(function(){
console.log('****移除订阅subCallback****')
pdd.unSubstribe('age', subCallback);
},2500)
setTimeout(function(){
console.log('=====发布:age => 30=====')
pdd.publish('age', 30, 'abc');
},3000)
javascript 实现 发布-订阅模式
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 前言 一个多月前,面试时被问到发布-订阅模式,面试完就查阅资料学习了下。这篇文章我将记录我对此的理解并用Javas...
- 什么是发布-订阅模式? 发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变...
- 观察者模式(Observer) 观察者模式:定义了对象间一种一对多的依赖关系,当目标对象 Subject 的状态发...