浅谈JS发布订阅模式

举报
Ailjx 发表于 2022/08/13 20:17:56 2022/08/13
【摘要】 前言在使用前端各大框架时,多多少少会使用过或听说过发布订阅模式,本篇文章将使用原生JS实现一个简单的发布订阅模式,并演示其在React中进行跨组件通信的作用 一、发布订阅模式是什么?简单来说发布-订阅模式其实是一种对象间一对多的依赖关系,当一个对象的状态发送改变时,所有依赖于它的对象都将得到状态改变的通知。订阅者把自己想订阅的事件处理函数注册到统一的调度中心中,当发布者向调度中心发布数据时...

前言

在使用前端各大框架时,多多少少会使用过或听说过发布订阅模式,本篇文章将使用原生JS实现一个简单的发布订阅模式,并演示其在React中进行跨组件通信的作用


一、发布订阅模式是什么?

简单来说发布-订阅模式其实是一种对象间一对多的依赖关系,当一个对象的状态发送改变时,所有依赖于它的对象都将得到状态改变的通知。

订阅者把自己想订阅的事件处理函数注册到统一的调度中心中,当发布者向调度中心发布数据时,由调度中心统一调用订阅者注册到调度中心事件处理函数

在这里插入图片描述

二、使用步骤

1.创建调度中心

代码如下

const bus = {
    list: [],
    //订阅
    subscribe(cb) {
        this.list.push(cb);
    },
    //发布
    publish(arg) {
        this.list.forEach((cb) => {
            cb && cb(arg);
        });
    },
};

代码解释

bus对象即是我们创建的调度中心,里面含有两个函数,一个是订阅函数(subscribe),一个是发布函数(publish),并含有一个存放订阅者事件处理函数的数组(list)。

发布订阅模式过程

  • 订阅者调用subscribe函数,并将自己对数据处理的事件函数传入其中
  • 调度中心订阅者订阅的事件处理函数统一存放到list数组中
  • 发布者调用publish函数,并可将发布的数据传入其中
  • 调度中心遍历list数组,依次执行订阅者订阅的事件处理函数,并将发布者发布的数据传入其中

2.实际操作

代码如下

 //订阅者
 bus.subscribe((arg) => {
 	//订阅者收到数据变化后进行的一些操作
     console.log("1111", arg);
 });
 bus.subscribe((arg) => {
     console.log("2222", arg);
 });

 //发布者
 bus.publish("我是发布者发布的参数");

控制台打印结果

该处使用的url网络请求的数据。

注意顺序,订阅者要先订阅,发布者再发布才会有效果
==联想一下公众号,一个公众号就是一个发布者,关注它的人都是订阅者,只有在我们关注了它之后,它发布的信息我们才能收到通知==

3. React中的应用

利用发布订阅模式进行React中跨组件通信

import React, { Component } from "react";

/**
 * 利用发布订阅模式进行组件通信
 * 由B组件向A组件传递数据
 */
 
// 调度中心
const bus = {
    list: [],
    //订阅
    subscribe(cb) {
        this.list.push(cb);
    },
    //发布
    publish(arg) {
        this.list.forEach((cb) => {
            cb && cb(arg);
        });
    },
};

// 订阅者
class A extends Component {
    constructor() {
        super();
        this.state = {
            info: "",
        };
        //在组件初始化时开始订阅
        bus.subscribe((info) => {
            //订阅的事件处理
            //根据发布者发布的信息修改状态
            this.setState({
                info: info,
            });
        });
    }
    render() {
        return (
            <div>
                <h1> 列表参数:{this.state.info}</h1>
            </div>
        );
    }
}

// 发布者
class B extends Component {
    render() {
        return (
            <div>
                {/* 发布数据 */}
                <button onClick={() => bus.publish(this.props.item)}>
                    {this.props.item}
                </button>
            </div>
        );
    }
}

export default function App() {
    return (
        <div>
            <A></A>
            {[1, 2, 3, 4].map((item) => (
                <B key={item} item={item}></B>
            ))}
        </div>
    );
}


总结

以上就是今天要讲的内容,本文仅仅简单介绍了发布订阅模式的创建及使用,其目的是能够通过原生JS去实现一些通用的功能,像上面演示的跨组件通信一样,它不仅能在React中应用,在其它框架中也能够灵活使用。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。