如何理解js的发布-订阅模式

Amio 发布于2019-08-22 16:27 / 2497人阅读

摘要：发布订阅模式观察者模式发布订阅模式也叫观察者模式，这是一个一对多的关系，可以多个订阅者订阅同一个事件，当事件触发时就会通知订阅者去执行订阅时绑定的程序我举个例子来解释一下同学想在结婚的时候邀请好友来喝喜酒，这个邀请的名单其实就是订阅事件

发布-订阅模式／观察者模式

发布-订阅模式也叫观察者模式，这是一个一对多的关系，可以多个订阅者订阅同一个事件，当事件触发时就会通知订阅者去执行订阅时绑定的程序；

我举个例子来解释一下：

A同学想在结婚的时候邀请好友B、C、D、E、F、G...来喝喜酒，这个邀请的名单其实就是订阅事件

class Person extends EventEmitter{
    constructor(){
        super();
        
    }
}

let A= new Person();

function drinkFn(){
    console.log( `xxxx年xx月xx日来xx大酒店和我的喜酒！`)
}
A.on("结婚",drinkFn)；

等到A同学要结婚的时候，他就会去通知他的好友XXX时间XX酒店过来喝酒，这个过程就是发布事件

A.emit("结婚");

以下是我的实现过程：

class EventEmitter {
    constructor(){
        this._count=null;
        
    }
    //订阅事件
    on(type,callBack,flag){
        //创建_events对象
        if(!this._events){
            this._events=Object.create(null);
        }
        
        // 判断_events对象是否有type属性
        if(this._events[type]){
            if(flag){
                this._events[type].unshift(callBack)
            }else{
                this._events[type].push(callBack)
            }
            
        }else{
            this._events[type]=[callBack]
        }
        
        //type如果不是newListener类型，则执行newListener对应的函数
        if(type!=="newListener"){
            this._events["newListener"]&&this._events["newListener"].forEach(fn=>{
                fn(type,callBack);
            })
        }
        // 超出最大绑定事件限制提示
        if(this._events[type].length>=this.getMaxListeners()){
            console.log("超出最大绑定事件限制")
        }
    }

    //订阅一次性事件
    once(type,callBack,flag){
        function warp(...argments){
            callBack(...argments);
            this.removeListener(type,callBack)
        }
        warp.cb=callBack;
        this.on(type,warp,flag);
        
    }

    //发布事件
    emit(type,...args){
        if(this._events[type]){
            this._events[type].forEach(fn => {
                fn.call(this,...args)
            });
        }
    }

    // 获取当前type事件的数组对象
    listeners(type){
        return this._events[type]||[];
    }

    // 订阅事件并在第一时间触发
    prependListener(type,callBack){
        this.on(type,callBack,true);
    }
    
    // 订阅一次性事件并在第一时间触发
    prependOnceListener(type,callBack){
        this.once(type,callBack,true);
    }
    
    // 获取当前实例所有的事件类型
    eventNames(){
        return Object.keys(this._events)
    }
    
    // 获取当前type事件类型的长度
    listenerCount(type){
        if(this._events[type]){
            return this._events[type].length
        }else{
            return 0
        }
        
    }
    
    // 移除type事件所有的执行函数
    removeListener(type,callBack){
        if(this._events[type]){
            this._events[type]=this._events[type].filter(fn=>{
                return callBack!=fn&&fn.cb!=callBack
            })
        }
    }
    
    // 移除实例上所有的事件
    removeAllListeners(){
        this._events=Object.create(null)
    }

    // 获取当前实例的最大事件绑定限制
    getMaxListeners(){
        return this._count ? this._count :EventEmitter.defaultMaxListeners;
    }
    
    // 设置当前实例的最大事件绑定限制
    setMaxListeners(n){
        this._count=n;
    }
        
}
// 设置默认的最大事件绑定限制
EventEmitter.defaultMaxListeners=10;

module.exports=EventEmitter;

GPU云服务器云服务器发布订阅模式订阅发布模式 DTS 订阅发布模式订阅模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94370.html

JS每日一题:设计模式-如何理解观察者(发布订阅)模式?

摘要：期设计模式如何理解观察者发布订阅模式定义观察者模式又叫发布订阅模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己生活实例理解你今天去看一个 20190411期设计模式-如何理解观察者(发布订阅)模式? 定义: 观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一...

baishancloud 2019-08-23 16:53 评论0 收藏0
简单理解观察者模式(pub/sub)在前端中的应用

摘要：概念观察者模式被广泛地应用于客户端编程中。所有的浏览器事件，等都是使用观察者模式的例子。在观察者模式中，一个对象订阅另一个对象的指定活动并得到通知，而不是调用另一个对象的方法。此外，观察者模式还可用于实现数据绑定。概念观察者模式被广泛地应用于JavaScript客户端编程中。所有的浏览器事件（mouseover，keypress等）都是使用观察者模式的例子。这种模式的另一个名字叫自...

guyan0319 2019-08-23 12:10 评论0 收藏0
JS中的观察者模式(发布订阅)

摘要：观察者模式简介观察者模式又称发布订阅模式，是一种最常用的设计模式之一了。其实浏览器的事件也是观察者模式这里订阅了的事件，当我们的鼠标点击操作，事件发布，对应的就会执行。包括在内的，只要是支持事件响应的核心模块都是的子类。观察者模式简介观察者模式又称发布订阅模式，是一种最常用的设计模式之一了。讲道理，如果我们写的不是稍微底层的代码，可能不会用到它。但是有了它会让代码更灵活，更加规...

YacaToy 2019-08-21 11:23 评论0 收藏0
观察者模式的使用介绍

摘要：观察者模式介绍观察者模式又称发布订阅模式，它定义对象间的一种一对多的依赖关系，当一个对象发生改变的时候，所依赖它的对象都能得到通知。关于内部的观察者模式可以参数这篇文档。总结总之，观察者模式在中的使用是非常广泛的。 javascript观察者模式介绍观察者模式又称发布-订阅模式，它定义对象间的一种一对多的依赖关系，当一个对象发生改变的时候，所依赖它的对象都能得到通知。例如：我们订阅...

ityouknow 2019-08-23 12:47 评论0 收藏0
如何维护老旧代码

摘要：我们在平时的工作中，总是会遇到老旧的系统以及老旧陈的代码。弊端就是需要维护两套代码，理解两套技术选型。那么问题就来了新的代码如何和旧的代码解耦新代码我们当然是用新仓库，新选择，新打包工具。。。我们在平时的工作中，总是会遇到老旧的系统以及老旧陈的代码。他们是业务长年累月的积累,以及因为是三、四年前的技术选型造成的系统架构的不合理以及繁琐的代码。维护这些代码总是很头疼，程序员遇到这样的代...

lcodecorex 2019-08-22 11:03 评论0 收藏0