实现一个简单的发布订阅模式_vue订阅者发布者实现

实现一个简单的发布订阅模式_vue订阅者发布者实现JavaScript 发布/订阅模式

大家好,又见面了,我是你们的朋友全栈君。

发布订阅模式可以理解为:

用户关注一个了微信公众号(订阅),当公众号有内容更新时会推送(发布)给所有关注该公众号的用户。

废话不多说直接上代码(此demo仅帮助理解发布/订阅模式):


let Observable = {
    observers:[],     // 订阅者集合
    addObserver:function (observer) { // 添加订阅者
        this.observers.push(observer)
    },
    removeObserver:function (observer) { // 移除订阅者
        let index = this.observers.indexOf(observer);
        if(~index){
            this.observers.splice(index,1);
        }
    },
    notifyObservers:function (message) {  // 向订阅者发布消息
        for(let i = 0; i <= this.observers.length-1; i++){
            this.observers[i](message);
        }
    }
};


function observer1(message){

    console.log(`1---------${message}`);

}

function observer2(message){

    console.log(`2---------${message}`);

}

function observer3(message){

    console.log(`3---------${message}`);

}

// 添加订阅者
Observable.addObserver(observer1);
Observable.addObserver(observer2);
Observable.addObserver(observer3);

// 向订阅者发布(通知)消息
Observable.notifyObservers('hello');

// 移除订阅者
Observable.removeObserver(observer1);

Observable.notifyObservers('test');

输出结果为:
    1---------hello
    2---------hello
    3---------hello
    2---------test
    3---------test
复制代码
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/107189.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Java 构造函数的详解

    Java 构造函数的详解我们人出生的时候,有些人一出生之后再起名字的,但是有些人一旦出生就已经起好名字的。那么我们在java里面怎么在对象一旦创建就赋值呢?1.构造方法的作用:构造方法作用:对对象进行初始化.如图:2.构造函数与普通函数的区别:(1). 一般函数是用于定义对象应该具备的功能。而构造函数定义的是,对象在调用功能之前,在建立时,应该具备的一些内容。也就是对象的初

    2022年7月8日
    24
  • 现代OpenGL教程(一):绘制三角形(imgui+OpenGL3.3)

    前言:imgui是一个开源的GUI框架,自带的例子里面直接集成了glfw+gl3w环境,本例使用的版本是imguiv1.61,下载地址:https://github.com/ocornut/imgui/tags教程目录(持续更新中):现代OpenGL教程(一):绘制三角形(imgui+OpenGL3.3)现代OpenGL教程(二):矩阵变换(imgui+OpenGL3.3)

    2022年4月8日
    335
  • random函数用法笔记

    random函数用法笔记1.导入random模块importrandom2.生成(n,m)之间的随机整数>>>importrandom>>>a=random.randint(1,10)#1<=a<=10且n,m大小必须n<m>>>print(a)3>>>3.取0-1之间随机浮点数…

    2022年5月20日
    40
  • C# FileStream类

    C# FileStream类C#FileStream类在C#语言中文件读写流使用FileStream类来表示,FileStream类主要用于文件的读写,不仅能读写普通的文本文件,还可以读取图像文件、声音文件等不同格式的文件。区别于File类的是它对文件可进行分步读写,减小内存压力,缺点是我们需要手动的关闭和释放资源,FileAccessFileAccess枚举类型主要用于设置文件的访问方式,具体的枚举…

    2022年7月21日
    14
  • vue实现简单的分页功能[通俗易懂]

    vue实现简单的分页功能[通俗易懂]分页其实就是对一组数据分组!而vue又刚好是数据驱动,所以我们只需要关注数据层就行了!分页开始—>变量:data(){return{//假设这是后台传来的数据来源data:[],//所有页面的数据totalPage:[],//每页显示数量pageSize:5,…

    2022年10月1日
    5
  • gridbagconstraints什么意思_gridlayout四个参数

    gridbagconstraints什么意思_gridlayout四个参数gridx,gridy:相对于容器左上角的x,y坐标gridwidth,gridheight:设置组件横向与纵向的单元格跨越个数。weightx,weighty:是否拉伸(0不拉伸,1拉伸)insets:设置元素的位置,类似html的margin,只是顺序有点不一样,依次是上,左,下,右。java.awt.Insets.Insets(inttop,intleft,intbottom,intright)fill:当某个组件未能填满单元格..

    2025年10月12日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号