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

本是古典何须时尚 2022-04-24 10:14 229阅读 0赞

## 观察者模式 ##

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

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

[原文链接][Link 1]

[Link 1]: https://mp.weixin.qq.com/s/B1Sp2A8MR8vm4g4EO24glw