发布订阅模式

一、是什么

就好比你在微博上关注了一个人，然后他每次发动态的时候，你都能收到消息提示。这就是发布订阅模式，博主就是发布者，你就是订阅者。博主的粉丝就是发布者的缓存列表，每当他发表说说后，就会遍历粉丝列表，通知所有的订阅者（就是粉丝）。

二、作用和应用

松耦合

发布者和订阅者互相独立运行。能够解决负载问题。方便维护。

应用

常见应用有 图片或模块懒加载。

层级复杂的组件之间通信。

三、实现方式

实现思路：

1. 创建一个对象
2. 在该对象上创建缓存列表
3. on 方法用来把函数 fn 都加到缓存列表中（订阅者注册事件到调度中心）
4. emit 方法取到 arguments 里第一个当做 event，根据 event 值去执行对应缓存列表中的函数（发布者发布事件到调度中心，调度中心处理代码）
5. off 方法可以根据 event 值取消订阅（取消订阅）
6. once 方法只监听一次，调用完毕后删除缓存函数（订阅一次）

class ObjServer {
    static events = new Map();

    static on(name, fn) {
        console.log('已订阅', name)
        this.events.set(name, {isOnce: false, fn})
    }

    static once(name, fn) {
        this.events.set(name, {isOnce: true, fn})
    }

    static off(name) {
        this.events.delete(name)
    }

    static emit(name, ...data) {
        console.log('已发布', name)
        const func = this.events.get(name)
        func.fn(...data)
        if (func.isOnce) {
            this.events.delete(name)
        }
    }
}

const testFun1 = (user, age) => {
    console.log(user + ':' + age)
}

const testFun2 = (car, price) => {
    console.log(car + ':' + price)
}

ObjServer.on('user', testFun1)
ObjServer.on('car', testFun2)

ObjServer.emit('user', 'leitao', 25)
ObjServer.emit('user', 'tianyu', 24)

ObjServer.emit('car', 'aodi', 30)
ObjServer.emit('car', 'baoma', 40)

运行结果

已订阅 user 
已订阅 car 
已发布 user 
leitao:25 
已发布 user 
tianyu:24 
已发布 car 
aodi:30 
已发布 car 
baoma:40