javascript 观察者模式 发布订阅模式

观察者模式

观察者模式，每一个观察者对象有两个方法

• 添加监听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帮助
// 小金表示：给予帮助

原文链接