观察者模式
观察者模式,每一个观察者对象有两个方法
- 添加监听
subscribe
- 发布事件
publish
观察者有个list
存放所有的已经添加监听,当需要的时候,遍历当前观察者的list
,达到发布给list
的所有的观察者。
//观察者模式
class Hunter {
constructor(name, level) {
this.name = name;
this.level = level;
this.list = [];
}
publish(money) {
console.log(this.level + '猎人' + this.name + '寻求帮助');
this.list.forEach(function (item, index) {
item(money);
});
}
subscribe(target, fn) {
console.log(this.level + '猎人' + this.name + '订阅了' + target.name);
target.list.push(fn);
}
}
let Ming = new Hunter('小白','白银')
let Jin = new Hunter('小金','黄金')
let Zhang = new Hunter('小张','黄金')
let Peter = new Hunter('Peter','青铜')
Ming.subscribe(Peter, function(money){
console.log('小白表示:' + (money > 200 ? '':'暂时很忙,不能') + '给予帮助')
})
Jin.subscribe(Peter, function(money){
console.log('小金表示:给予帮助')
})
Jin.subscribe(Peter, function(money){
console.log('小张表示:给予帮助')
})
Peter.publish(180)
// 白银猎人小白订阅了Peter
// 黄金猎人小金订阅了Peter
// 黄金猎人小金订阅了Peter
// 青铜猎人Peter寻求帮助
// 小白表示:暂时很忙,不能给予帮助
// 小金表示:给予帮助
// 小张表示:给予帮
发布订阅模式
- 调度中心,存放所有的
topic
和订阅事件 hunter
发布订阅者
可以额外添加权限控制、节流操作等等。
//发布订阅模式
//定义工会
let HunterUnion = {
type: 'hunt',
topics: Object.create(null),
subscribe: function (topic, fn) {
if(!this.topics[topic]){
this.topics[topic] = [];
}
this.topics[topic].push(fn)
},
publish: function (topic, money) {
if(!this.topics[topic])
return;
this.topics[topic].map(v=>v(money))
}
}
//定义猎人
class Hunter {
constructor(name, level){
this.name = name;
this.level = level;
}
publish(topic, money) {
console.log(this.level + '猎人' + this.name + `寻求${topic}帮助`);
HunterUnion.publish(topic, money)
}
subscribe(topic, fn) {
console.log(this.level + '猎人' + this.name + '订阅了' + topic);
HunterUnion.subscribe(topic, fn)
}
}
let Ming = new Hunter('小白','白银')
let Jin = new Hunter('小金','黄金')
let Zhang = new Hunter('小张','黄金')
let Peter = new Hunter('Peter','青铜')
Ming.subscribe('tiger', function(money){
console.log('小白表示:' + (money > 200 ? '':'暂时很忙,不能') + '给予帮助')
})
Jin.subscribe('tiger', function(money){
console.log('小金表示:给予帮助')
})
Jin.subscribe('sheep', function(money){
console.log('小金表示:给予帮助')
})
Zhang.subscribe('tiger', function(money){
console.log('小张表示:给予帮助')
})
Peter.publish('tiger', 200)
Peter.publish('sheep', 100)
// 白银猎人小白订阅了tiger
// 黄金猎人小金订阅了tiger
// 黄金猎人小金订阅了sheep
// 黄金猎人小张订阅了tiger
// 青铜猎人Peter寻求tiger帮助
// 小白表示:暂时很忙,不能给予帮助
// 小金表示:给予帮助
// 小张表示:给予帮助
// 青铜猎人Peter寻求sheep帮助
// 小金表示:给予帮助