实现一个简单的发布订阅模式_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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Tcp是什么?_跟你说完了

    Tcp是什么?_跟你说完了之前受到Wireshark——从此我就喜欢上了它,就像是学武之人得到了一把称手好剑的启发,带着回顾、深入TCP的目标,回顾了《TCP-IP协议卷1》《图解TCP/IP协议》,受益匪浅。写这篇文章,希望自己能对TCP形成一个系统性的知识沉淀,也希望能给初学者一个基本概念的认识,读完本文再深入书籍,应该也是不错滴。学习路径:1、阅读《TCP-IP协议卷1》的TCP章节(相关知识非常全面,各种算法…

    2025年9月17日
    7
  • 在Linux安装Jenkins

    在Linux安装Jenkins自动更新发布必备神器,装起来

    2025年8月4日
    3
  • 奔图m7160dw驱动_奔图打印机m7100dn

    奔图m7160dw驱动_奔图打印机m7100dn奔图M7100dW打印机驱动是专门为奔图旗下的M7100dW型号打印机打造的驱动程序。它能够为你解决打印机常见的无法扫描、无法识别等问题。他是连接打印机与电脑的桥梁,让你更好的操作这款的打印机。【打印机特色】1、操作便捷,乐在其中ECOSYSP2135dn外观小巧,空间适应度很高,可以更好地满足用户办公空间布置的需要。而且外形美观,放置在办公桌上能够与办公家具很好地融合在一起,营造出和谐的办公室…

    2022年8月30日
    3
  • lunix常用命令「建议收藏」

    lunix常用命令「建议收藏」文件管理命令ls      显示文件或目录   -l     列出文件详细信息l(list)   -a     列出当前目录下所有文件及目录,包括隐藏的a(all)mkdir    创建目录   -p     创建目录,若无父目录,则创建p(parent)cd   

    2022年10月3日
    2
  • Lasso回归总结

    Lasso回归总结Ridge回归由于直接套用线性回归可能产生过拟合,我们需要加入正则化项,如果加入的是L2正则化项,就是Ridge回归,有时也翻译为岭回归。它和一般线性回归的区别是在损失函数上增加了一个L2正则化的项,和一个调节线性回归项和正则化项权重的系数α。损失函数表达式如下:J(θ)=1/2(Xθ−Y)T(Xθ−Y)+1/2α||θ||22其中α为常数系数,需要进行调优。||θ||2为L…

    2022年5月30日
    38
  • Java深入理解深拷贝和浅拷贝区别[通俗易懂]

    Java深入理解深拷贝和浅拷贝区别[通俗易懂]一、拷贝的引入(1)、引用拷贝创建一个指向对象的引用变量的拷贝。Teacherteacher=newTeacher("Taylor",26);Teacherotherteacher=teacher;System.out.println(teacher);System.out.println(otherteacher);输出结果:blog.Teacher@355da2…

    2022年10月1日
    3

发表回复

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

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