浅谈 JS 发布订阅模式

作者：海底烧烤店ai

2022 年 8 月 31 日
河南
本文字数：1563 字
阅读完需：约 5 分钟

前言

在使用前端各大框架时，多多少少会使用过或听说过发布订阅模式，本篇文章将使用原生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("我是发布者发布的参数");

复制代码

控制台打印结果：

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

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中应用，在其它框架中也能够灵活使用。

发布于: 刚刚阅读数: 5

原文链接:【http://xie.infoq.cn/article/ce5de43fe76e4fc295ab672c6】。文章转载请联系作者。

海底烧烤店ai

关注

前端之行，任重道远！ 2022.08.25 加入

本科大三学生、CSDN前端领域新星创作者、华为云享专家、第十三届蓝桥杯国赛三等奖获得者

发布

暂无评论

创作场景

浅谈 JS 发布订阅模式

前言

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

二、使用步骤

1.创建调度中心

2.实际操作

3. React 中的应用

总结

海底烧烤店ai

评论