详解js中订阅发布模式的原理即运用场景

亦凉 2023-01-16 06:42 133阅读 0赞

## 订阅发布模式由三部分构成 ##

1：订阅者  
2：事件中心  
3：发布者  
具体实现流程 发布者发布消息给事件中心 事件中心通知所有的订阅者

## 案例1： ##

家长都想知道自己孩子在学校的成绩 因此老师就创建了一个群来告知家长学习成绩 在这里 家长就是订阅者 群 就相当于是实践中心 而老师就是发布者 老师只需要向群（事件中心）发布消息 所有的家长都能得知消息 这就是订阅发布模式

## 案例2 ##

vue中的自定义事件  
在自定义事件中 new一个vue实例 这个实例 就相当于我们的事件中心  o n 注 册 事 件 在 这 里 就 是 订 阅 者 而 on注册事件 在这里就是订阅者 而 on注册事件在这里就是订阅者而emit 在这里就相当于是发布者 在某个时候触发 e m i t 就 会 通 知 所 有 的 订 阅 者 即 emit 就会通知所有的订阅者 即 emit就会通知所有的订阅者即on注册的相同事件的函数 具体看代码

let vm =new Vue();
        vm.$on('dataChange',()=>{ 
            console.log('dataChange1')
        })
        vm.$on('dataChange',()=>{ 
            console.log('dataChange2')
        })
        vm.$emit('dataChange')

## 案例3： ##

vue组件中的组件通信 bus

// 事件中心
        let eventBus = new Vue()
        // componentA 组件A  
        // 这里我们作为发布者
        addToto(){ 
            // 发布消息事件
            eventBus.$emit('add-todo',{ name:'xiaogao'})
        }
        // componentB  组件B
        // 订阅者 
        created(){ 
            // 订阅消息 事件
            eventBus.$on('add-to',this.addToto)
        }

## vue对象订阅发布模式的模拟实现 ##

在vue中  o n 是 订 阅 者 用 来 注 册 事 件 这 些 被 注 册 事 件 中 的 函 数 需 要 存 储 事 件 中 心 这 里 我 们 用 s u b s 表 示 事 件 中 心 因 为 相 同 的 事 件 可 以 注 册 不 同 的 函 数 故 我 们 的 事 件 中 心 是 一 个 对 象 键 值 对 的 形 式 并 且 每 个 键 值 应 该 是 换 一 个 数 组 的 形 式 而 on 是订阅者 用来注册事件 这些被注册事件中的函数需要存储事件中心 这里我们用subs表示事件中心 因为相同的事件可以注册不同的函数 故我们的事件中心是一个对象键值对的形式 并且每个键值应该是换一个数组的形式 而 on是订阅者用来注册事件这些被注册事件中的函数需要存储事件中心这里我们用subs表示事件中心因为相同的事件可以注册不同的函数故我们的事件中心是一个对象键值对的形式并且每个键值应该是换一个数组的形式而emit是发布者 用来触发事件 具体代码实现如下

class EventEmitter { 
            constructor() { 
                this.subs = Object.create(null);//Object.create创建对象 有原型对象 这里参数值为null 表无原型对象 仅仅是创建一个空对象
            }
            // 注册事件
            $on(eventType, handler) { 
                this.subs[eventType] = this.subs[eventType] || [];
                this.subs[eventType].push(handler);
    
            }
             // 触发事件
            $emit(eventType) { 
                if (this.subs[eventType]) { 
                    this.subs[eventType].forEach(handler => { 
                        handler();
                    });
                }
            }
        }
        let em = new EventEmitter();
        em.$on('click',()=>{ console.log('click1')})
        em.$on('click',()=>{ console.log('click2')})
        em.$emit('click')

下一篇 我讲解观察模式