JavaScript 发布订阅模式

时间:2022-06-28 前端若水人气:0

前言

发布订阅设计模式是和观察者设计模式基本上相同，但是他们两个设计模式不同的是发布订阅者拥有一个事件处理中心而观察者并没有

比如，我们利用订阅者设计模式去监听一个对象的改变，可以给对象改变的方法添加多个行为以及一个行为添加多个方法进行处理

发布订阅设计模式

发布订阅设计模式只需要一个类，类中拥有一个事件中心管理这行为的任务对列，我们利用这个构造函数创建一个实例，在进行模拟一个addEventListener()事件，进行触发事件中心行为上任务对列的方法

我们来举一个订阅者设计模式的例子：

小明去买书

去书店问店员，店员说没有就回家，过一会再去问问，以此往复，直到买到

小红去买书

去书店问店员，店员说没有就会留下一个联系电话给店员，有了书店员就会联系小红，过去买书

小红这种就是发布订阅设计模式的操作，首先给店员留下电话号是往行为的任务队列中添加方法，店员打电话是触发了书到了的行为

订阅者类有个一个属性:

事件中心，用于存放订阅者行为的任务对列

订阅者类中有三个方法，分别为：

往任务队列中添加函数
触发任务队列里的函数
删除任务队列里的函数

创建类，类中有一个对象，该对象就是事件中心，用于存储行为的任务队列

   class Subscribe {
            constructor() {
                // 事件中心
                this.task = {};
            }
      }

添加触发任务队列函数方法：

        // type 行为
            trigger(type) {
                // 判断当前的行为是否真的订阅过
                if (!(type in this.task)) return;
                // 行为订阅过直接进行执行该行为上的方法
                this.task[type].map(callbak => callbak())
            }

添加任务队列中删除函数方法：

            // type 行为
            // callback 函数
            del(type, callback) {
                // 判断当前的行为是否真的订阅过
                if (!(type in this.task)) return;
                // 过滤出当前想要删除的函数
                 this.task[type].filter(val => val != callback);
            }

添加任务队列中添加函数方法：

          // type 是行为
            // callback 是行为发生时候触发的函数
            add(type, callback) {
                // 判断type这个行为是否已经被注册过了，没有则注册
                if (!(type in this.task)) {
                    // 没有注册过给一个空数组
                    this.task[type] = [];
                };
                //往该行为的任务队列添加方法
                this.task[type].push(callback)
            }

创建一个订阅者实例并添加行为和对行为的任务对列增删方法

        // 创建订阅者实例
        const per = new Subscribe();
        // 给订阅者实例添加行为和出现行为时触发的方法
        per.add('click', handA)
        per.add('click', handB)
        per.add('click', handC)
        // 根据行为进行触发方法
        per.trigger('click')
        // 根据行为和方法进行删除
        per.del('click', handC)
        // 方法
        function handA() {
            console.log('clickA');
        }
        // 方法
        function handB() {
            console.log('clickB');
        }
        // 方法
        function handC() {
            console.log('clickC');
        }

订阅者设计模式如果添加了很多事件会增加内存的消耗并且程序难以维护以及难以判断事件来源

加载全部内容