手写订阅发布

  <script>
        class Observer {
            constructor() {
                // 消息池
                this.message = {}
            }
            $on(name, fn) {
                // 如果没有绑定过事件，则添加消息队列[]，然后加入回调
                if (!this.message[name]) {
                    this.message[name] = []
                }
                this.message[name].push(fn)
            }
            $remove(name, fn) {
                // 如果没有绑定过事件，则跳出。（或者报错）
                if (!this.message[name]) {
                    return
                }
                // 如果没有第二个参数，说明需要把消息队列全部移除
                if (!fn) {
                    delete this.message[name]
                } else {
                    // 有第二个参数，那么筛选出与第二个参数不同的fn
                    this.message[name] = this.message[name].filter((item) => { return item != fn })
                }
            }
            $emit(name, ...args) {
                // 如果没有绑定过事件，则跳出。（或者报错）
                if (!this.message[name]) { return }
                // 如果有则挨个触发
                this.message[name].forEach(item => {
                    item(...args)
                });
            }
        }
        let eventbus = new Observer()
        eventbus.$on('aaa', fn1)
        eventbus.$on('aaa', fn2)
        function fn1(a, b) {
            console.log(a, b);
        }
        function fn2(a, b) {
            console.log(a, b);
        }
        // eventbus.$remove('aaa', fn2)
        eventbus.$emit('aaa', 11, 22)
        //11 22
        //11 22
        // console.log(eventbus);