设计模式-发布订阅（1）

最新推荐文章于 2024-07-18 10:24:18 发布

道甚夷

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量86

点赞数

分类专栏：设计模式文章标签： javascript

本文链接：https://blog.csdn.net/junjiahuang/article/details/119915448

版权

设计模式专栏收录该内容

36 篇文章 0 订阅

订阅专栏

发布订阅模式又称观察者模式

当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）

意图：

定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。
主要解决：一个对象状态改变给其他对象通知的问题，而且要考虑到易用和低耦合，保证高度的协作。
何时使用：一个对象（目标对象）的状态发生改变，所有的依赖对象（观察者对象）都将得到通知，进行广播通知。
如何解决：使用面向对象技术，可以将这种依赖关系弱化。
关键代码：在抽象类里有一个 ArrayList 存放观察者们。
应用实例：
1. 拍卖的时候，拍卖师观察最高标价，然后通知给其他竞价者竞价。
2. 售楼开盘订阅，一旦有新开的盘则通知购房者。
3. dom的click、focus等事件
4. 在Vue中的任意组件件通信事件总线EventBus
优点：
1. 观察者和被观察者是抽象耦合的。
2. 建立一套触发机制。
缺点：
1. 如果一个被观察者对象有很多的直接和间接的观察者的话，将所有的观察者都通知到会花费很多时间。
2. 如果在观察者和观察目标之间有循环依赖的话，观察目标会触发它们之间进行循环调用，可能导致系统崩溃。
3. 观察者模式没有相应的机制让观察者知道所观察的目标对象是怎么发生变化的，而仅仅只是知道观察目标发生了变化。
使用场景：
1. 一个抽象模型有两个方面，其中一个方面依赖于另一个方面。将这些方面封装在独立的对象中使它们可以各自独立地改变和复用。
2. 一个对象的改变将导致其他一个或多个对象也发生改变，而不知道具体有多少对象将发生改变，可以降低对象之间的耦合度。
3. 一个对象必须通知其他对象，而并不知道这些对象是谁。需要在系统中创建一个触发链，A对象的行为将影响B对象，B对象的行为将影响C对象……，可以使用观察者模式创建一种链式触发机制。
注意事项：
1. 避免循环引用。
2. 如果顺序执行，某一观察者错误会导致系统卡壳，一般采用异步方式。

说白了，其实就是定义一个数组，将不同传入的订阅者名称设置为对象的一个key，而value值则为传入的回调函数，并且，这个value值是个数组。不同的人订阅自己的回调，发布的时候会被执行。同一个人发布多次可以存储多个函数，执行的时候依次循环调用回调函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        class PublishSubscribePattern{
            constructor() {
                this.msgMap = {}
            }
            // 发布
            publish(name, param) {
                 
                const msg = this.msgMap[name]
                if(msg) {
                    // 执行该订阅者多事件
                    msg.subscribes.forEach(subscribe => {
                        subscribe.callback(param)
                    })
                } else {
                    console.log('暂无人订阅', name, param)
                }
            }
            // 订阅
            subscribe(name, callback) {
                const msg = this.msgMap[name]
                if(msg) {
                    // 已经有订阅者，添加订阅事件。
                    msg.subscribes.push({callback})
                } else {
                    // 第一次订阅的时候，将订阅者名称和事情存入数组中
                    this.msgMap[name] = {
                        name,
                        subscribes: [{callback}]
                    }
                }
            }
        }
        const event = new PublishSubscribePattern()
        event.publish('news', 'new1')
        event.subscribe('news', param => {
            console.log('news param', param)
        })
        event.publish('news', 'new2')
    </script>
</body>
</html>

参考: 设计模式（看概念和总结
Javascript中常用的13种设计模式（看实现
JavaScript设计模式与开发实践（pdf) 提取码:q8d5 （故事情节带入，更通俗易懂，有概念也有实现。更推荐

道甚夷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
设计模式-发布订阅（1）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
复制链接

扫一扫