前端设计模式-发布订阅

2020-08-17 Javascript

前言

发布订阅又叫观察者模式，它记录的是一种一对多的依赖关系，当订阅的数据状态发生改变时，所对应的依赖的对象会得到消息(通知)。

优点

发布订阅在异步编程中，可以替代回调，从而无需关注对象在异步运行中的内部状态，只需要关注有用的事件发生点。对象之间的解耦。

发布-订阅的组成要素

一个发布订阅包包含了三要素，发布者(Publisher)，订阅者(Subscriber)，调度处理中心(Event channel)。 当Publisher发布一个事件到Event channel，Subscriber就会收到由Event Bus触发的事件的通知。

发布订阅的简单实现 

class EventEmeitter {
    constructor(){
        this.events = new Map();
        this._maxListeners = this._maxListenners || 10;
    }
    // 发布
    emit(type,...args){
       let handler;
           handler = this.events.get(type);
           if(Array.isArray(handler)){
               for(let i = 0; i < handler.length; i++){
                   if(args.length>0){
                       handler[i].apply(this,args);
                   }else{
                       handler[i].apply(this);
                   }
               }
           }else{
               if(args.length>0){
                   handler.apply(this,args);
               }else{
                   handler.apply(this);
               }
           }
           return true;
    }
    //  添加监听事件
    addEventListener(type,fn){
        const handler = this.events.get(type); // 获取对应事件名称的函数
            if(!handler){
                this.events.set(type,fn);
            }else if(handler && typeof handler === 'function'){
                // 如果handler是函数说明当前只有一个监听函数
                this.events.set(type,[handler,fn]);
            }else{
                if(handler.length <= this._maxListenners) return handler.push(fn); // 添加多个监听有上限
        }
    }
    // 移除监听事件
    removeListener(type, fn){
        const handler = this.events.get(type); // 获取对应事件名称的函数
            // 如果是函数,说明只被监听了一次
            if(handler && typeof handler === 'function'){
                this.events.delete(type,fn);
            }else{
                // 如果handler是数组，说明被多次监听，需要找到对应的函数的位置
                let position;
                for(let i = 0 ; i< handler.length; i++){
                    if(handler[i] === fn){
                        position = i
                    }else{
                        position = -1;
                    }
                }
                // 如果找到匹配的函数
                if(position !== -1){
                    // 直接删除
                    handler.splice(position,1);
                    // 如果清除后只有一个函数,那么取消数组,以函数形式保存
                    if(handler.length ===1){
                        this.events.set(type,handler[0]);
                    }
                } else {
                    return this;
                }
            }
    }
}

class EventEmeitter {
    constructor(){
        this.events = new Map();
        this._maxListeners = this._maxListenners || 10;
    }
    // 发布
    emit(type,...args){
       let handler;
           handler = this.events.get(type);
           if(Array.isArray(handler)){
               for(let i = 0; i < handler.length; i++){
                   if(args.length>0){
                       handler[i].apply(this,args);
                   }else{
                       handler[i].apply(this);
                   }
               }
           }else{
               if(args.length>0){
                   handler.apply(this,args);
               }else{
                   handler.apply(this);
               }
           }
           return true;
    }
    //  添加监听事件
    addEventListener(type,fn){
        const handler = this.events.get(type); // 获取对应事件名称的函数
            if(!handler){
                this.events.set(type,fn);
            }else if(handler && typeof handler === 'function'){
                // 如果handler是函数说明当前只有一个监听函数
                this.events.set(type,[handler,fn]);
            }else{
                if(handler.length <= this._maxListenners) return handler.push(fn); // 添加多个监听有上限
        }
    }
    // 移除监听事件
    removeListener(type, fn){
        const handler = this.events.get(type); // 获取对应事件名称的函数
            // 如果是函数,说明只被监听了一次
            if(handler && typeof handler === 'function'){
                this.events.delete(type,fn);
            }else{
                // 如果handler是数组，说明被多次监听，需要找到对应的函数的位置
                let position;
                for(let i = 0 ; i< handler.length; i++){
                    if(handler[i] === fn){
                        position = i
                    }else{
                        position = -1;
                    }
                }
                // 如果找到匹配的函数
                if(position !== -1){
                    // 直接删除
                    handler.splice(position,1);
                    // 如果清除后只有一个函数,那么取消数组,以函数形式保存
                    if(handler.length ===1){
                        this.events.set(type,handler[0]);
                    }
                } else {
                    return this;
                }
            }
    }
}

例子

发布订阅的应用场景

比如我们很喜欢看某个公众号号的文章，但是我们不知道什么时候发布新文章，要不定时的去翻阅；这时候，我们可以关注该公众号，当有文章推送时，会有消息及时通知我们文章更新了。 看似简单的操作，其实是一个典型的发布订阅模式，公众号属于发布者，用户属于订阅者；用户将订阅公众号的事件注册到调度中心，公众号作为发布者，当有新文章发布时，公众号发布该事件到调度中心，调度中心会及时发消息告知用户。

基于公众号的发布订阅 

// 实例化event bus
const eventBus = new EventEmeitter() 
//订阅方法
function user1(data){
    console.log(`订阅用户1`, data)
}
function user2(data){
    console.log(`订阅用户2`, data)
}
// 添加订阅
eventBus.addEventListener('article', user1)
eventBus.addEventListener('article', user2)
// 发布
eventBus.emit('article', '有新的文章发布了')

// 实例化event bus
const eventBus = new EventEmeitter() 
//订阅方法
function user1(data){
    console.log(`订阅用户1`, data)
}
function user2(data){
    console.log(`订阅用户2`, data)
}
// 添加订阅
eventBus.addEventListener('article', user1)
eventBus.addEventListener('article', user2)
// 发布
eventBus.emit('article', '有新的文章发布了')

版权属于: vincent

本文链接:

转载时须注明出处及本声明

Tags:# Javascript # 设计模式
···