当前位置： 首页 > news >正文

使用 pubsub-js 进行消息发布订阅

news 2026/4/13 2:37:20

npm 包地址

github 包地址

pubsub-js 是一个轻量级的 JavaScript 基于主题的消息订阅发布库 ，压缩后小于1b。它具有使用简单、性能高效、支持多平台等优点，可以很好地满足各种需求。

功能特点：

  • 无依赖
  • 同步解耦
  • ES3 兼容。pubsub-js 能够在任何可以执行 JavaScript 的地方运行。
  • AMD / CommonJS 模块支持
  • 不修改订阅者（jQuery 自定义事件修改订阅者）
  • 易于理解和使用（得益于同步解耦）
  • 小（ish），压缩后小于 1kb

获取 pubsub-js

你可以通过以下几种方式获取 pubsub-js。

  • 使用 NPM 包

首先，你需要在项目根目录下使用以下命令安装 pubsub-js：

# 使用 pnpm 安装
pnpm add pubsub-js
# 使用 npm 安装
npm install --save pubsub-js
# 使用 yarn 安装
yarn add pubsub-js
  • 使用 CDN

你还可以通过 CDN 获取构建好的 pubsub-js 文件。将以下代码添加到 HTML 文件的 <script> 标签中：

<script src="https://unpkg.com/pubsub-js"></script>
<!-- or -->
<script src="http://www.jsdelivr.com/#!pubsubjs"></script>
<!-- or -->
<script src="https://cdnjs.com/libraries/pubsub-js"></script>
  • 从 GitHub下载

GitHub下载地址

截止到目前，获取的最新版本是 v1.9.4，如图：

pubsub

引入 pubsub-js

  • 通过 NPM 包引入

在 JavaScript 文件顶部使用 import 引入 pubsub-js：

// using ES6 modules
import PubSub from 'pubsub-js'// using CommonJS modules
const PubSub = require('pubsub-js')
  • 使用 script 标签引入

通过直接在 HTML 文件中添加 <script> 标签，引入构建好的 pubsub-js 文件：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><!-- 引入 pubsub-js 文件 --><script src="https://unpkg.com/pubsub-js"></script></head>
</html>

简单使用

以更新未读消息数量为例。

  1. 首先，新建一个 pubsub.js 文件
import PubSub from 'pubsub-js'export default PubSub
  1. 使用 subscribe 订阅事件/ unsubscribe 取消订阅
import { onMounted, onUnmounted, ref } from 'vue'
import PubSub from '@/utils/pubsub'const count = ref(0)const readmessage = () => {count.value = count.value - 1
}
onMounted(() => {PubSub.subscribe('messageread', readmessage)...
})
onUnmounted(() => {PubSub.unsubscribe('messageread', readmessage)
})
  1. 使用 publish 发送消息
import PubSub from '@/utils/pubsub'...
PubSub.publish('messageread')
...

订阅 subscribe

  • 获取订阅
// subscriptions by token from all topics
PubSub.getSubscriptions('token');
  • 订阅计数
// count by token from all topics
PubSub.countSubscriptions('token');

取消/清除订阅 unsubscribe

订阅之后，一定要取消订阅。

  • 取消特定订阅
// create a function to receive the topic
var mySubscriber = function (msg, data) {console.log(msg, data);
};// add the function to the list of subscribers to a particular topic
// we're keeping the returned token, in order to be able to unsubscribe
// from the topic later on
var token = PubSub.subscribe('MY TOPIC', mySubscriber);// unsubscribe this subscriber from this topic
PubSub.unsubscribe(token);
  • 取消某个函数的所有订阅
// create a function to receive the topic
var mySubscriber = function(msg, data) {console.log(msg, data);
};// unsubscribe mySubscriber from ALL topics
PubSub.unsubscribe(mySubscriber);
  • 清除某个主题的所有订阅
// no further notifications for 'a.b' and 'a.b.c' topics
// notifications for 'a' will still get published
PubSub.subscribe('a', myFunc1);
PubSub.subscribe('a.b', myFunc2);
PubSub.subscribe('a.b.c', myFunc3);PubSub.unsubscribe('a.b');
  • 清除所有订阅
// all subscriptions are removed
PubSub.clearAllSubscriptions();

pubsub-js 通过发布/订阅模式实现实现组件间的解耦合，可以减少代码的复杂度和维护成本，使代码设计更人性化。

相关文章：

使用 pubsub-js 进行消息发布订阅

npm 包地址 github 包地址 pubsub-js 是一个轻量级的 JavaScript 基于主题的消息订阅发布库 &#xff0c;压缩后小于1b。它具有使用简单、性能高效、支持多平台等优点&#xff0c;可以很好地满足各种需求。 功能特点&#xff1a; 无依赖同步解耦ES3 兼容。pubsub-js 能够在…...

编程日记 2023/11/12 11:13:36

TA Shader基础

渲染管线 概念&#xff1a;GPU绘制物体的时候&#xff0c;标准的&#xff0c;流水线一样的操作 游戏引擎如何绘制物体&#xff1a;CPU提供绘制数据&#xff08;顶点数据&#xff0c;纹理贴图等&#xff09;给GPU&#xff0c;配置渲染管线&#xff08;装载Shader代码到GPU&…...

编程日记 2023/11/12 11:12:35

VScode + opencv（cmake编译） + c++ + win配置教程

1、下载opencv 2、下载CMake 3、下载MinGW 放到一个文件夹中 并解压另外两个文件 4、cmake编译opencv 新建文件夹mingw-build 双击cmake-gui 程序会开始自动生成Makefiles等文件配置&#xff0c;需要耐心等待一段时间。 简单总结下&#xff1a;finish->configuring …...

编程日记 2023/11/12 11:11:33

Vue中的常用指令v-html / v-show / v-if / v-else / v-on / v-bind / v-for / v-model

前言 持续学习总结输出中&#xff0c;Vue中的常用指令v-html / v-show / v-if / v-else / v-on / v-bind / v-for / v-model 概念&#xff1a;指令&#xff08;Directives&#xff09;是Vue提供的带有 v- 前缀 的特殊标签属性。可以提高操作 DOM 的效率。 vue 中的指令按照不…...

编程日记 2023/11/12 11:10:33

ChatGPT 提问技巧

ChatGPT是由 OpenAI 训练的⼀款⼤型语⾔模型&#xff0c;能够和你进⾏任何领域的对话。 它能够⽣成类似于⼈类写作的⽂本。您只需要给出提示或提出问题&#xff0c;它就可以⽣成你想要的东⻄。 在此⻚⾯中&#xff0c;您将找到可与 ChatGPT ⼀起使⽤的各种提示。 只需按照下…...

编程日记 2023/11/12 11:09:32

2023-11-09 LeetCode每日一题（逃离火灾）

2023-11-09每日一题 一、题目编号 2258. 逃离火灾二、题目链接 点击跳转到题目位置 三、题目描述 给你一个下标从 0 开始大小为 m x n 的二维整数数组 grid &#xff0c;它表示一个网格图。每个格子为下面 3 个值之一&#xff1a; 0 表示草地。1 表示着火的格子。2 表示一…...

编程日记 2023/11/12 11:08:31

阿里云-maven私服idea访问私服与组件上传

1.进入aliyun制品仓库 2. 点击 生产库-release进入 根据以上步骤修改本地 m2/setting.xml文件 3.pom.xml文件 点击设置获取url 4. idea发布组件...

编程日记 2023/11/12 11:07:30

Ubuntu上的TFTP服务软件

2023年11月11日&#xff0c;周六下午 目录 tftpd-hpa atftpd 配置和启动 tftpd-hpa 这是一个TFTP服务器软件包&#xff0c;提供了一个简单的TFTP服务器。 你可以使用以下命令安装它&#xff1a; sudo apt-get install tftpd-hpaatftpd 这是另一个常用的TFTP服务器软件包…...

编程日记 2023/11/12 11:06:29

jedis、lettuce与redis交互分析

概念梳理&#xff1a; redis是缓存服务器&#xff0c;jedis、lettuce都是Java语言下的redis客户端&#xff0c;用于与redis服务器进行交互。springboot项目中一般使用的是spring data redis&#xff0c;spring data redis依赖与jedis或lettuce&#xff0c;可以进行配置&#x…...

编程日记 2023/11/12 11:05:27

C++算法:矩阵中的最长递增路径

涉及知识点 拓扑排序 题目 给定一个 m x n 整数矩阵 matrix &#xff0c;找出其中 最长递增路径 的长度。 对于每个单元格&#xff0c;你可以往上&#xff0c;下&#xff0c;左&#xff0c;右四个方向移动。 你 不能 在 对角线 方向上移动或移动到 边界外&#xff08;即不允…...

编程日记 2023/11/12 11:04:25

OpenWRT配置SFTP远程文件传输，让数据分享更安全

文章目录 前言 1. openssh-sftp-server 安装2. 安装cpolar工具3.配置SFTP远程访问4.固定远程连接地址 前言 本次教程我们将在OpenWRT上安装SFTP服务&#xff0c;并结合cpolar内网穿透&#xff0c;创建安全隧道映射22端口&#xff0c;实现在公网环境下远程OpenWRT SFTP&#xf…...

编程日记 2023/11/12 11:03:24

已解决：rm: 无法删除“/opt/module/zookeeper-3.4.10/zkData/zookeeper_server.pid“: 权限不够

解决&#xff1a; ZooKeeper JMX enabled by default Using config: /opt/module/zookeeper-3.4.10/bin/../conf/zoo.cfg Stopping zookeeper ... /opt/module/zookeeper-3.4.10/bin/zkServer.sh: 第 182 行:kill: (4149) - 不允许的操作 rm: 无法删除"/opt/module/zooke…...

编程日记 2023/11/12 11:02:22

Flink（四）【DataStream API - Source算子】

前言 今天开始学习 DataStream 的 API &#xff0c;这一块是 Flink 的核心部分&#xff0c;我们不去学习 DataSet 的 API 了&#xff0c;因为从 Flink 12 开始已经实现了流批一体&#xff0c; DataSet 已然是被抛弃了。忘记提了&#xff0c;从这里开始&#xff0c;我开始换用 F…...

编程日记 2023/11/12 11:01:21

GIS入门，xyz地图瓦片是什么，xyz数据格式详解，如何发布离线XYZ瓦片到nginx或者tomcat中

XYZ介绍 XYZ瓦片是一种在线地图数据格式，由goole公司开发。 与其他瓦片地图类似，XYZ瓦片将地图数据分解为一系列小的图像块，以提高地图显示效率和性能。 XYZ瓦片提供了一种开放的地图平台，使开发者可以轻松地将地图集成到自己的应用程序中。同时，它还提供了高分辨率图像和…...

编程日记 2023/11/12 11:00:20

[工业自动化-14]：西门子S7-15xxx编程 - 软件编程 - STEP7 TIA博途是全集成自动化软件TIA portal快速入门

目录 一、TIA博途是全集成自动化软件TIA portal快速入门 1.1 简介 1.2 软件常用界面 1.3 软件安装的电脑硬件要求 1.4 入口 1.5 主界面 二、PLC软件编程包含哪些内容 2.1 概述 2.2 电机运动控制 一、TIA博途是全集成自动化软件TIA portal快速入门 1.1 简介 Siemens …...

编程日记 2023/11/12 10:59:19

【教3妹学编程-算法题】Range 模块

3妹&#xff1a;哈哈哈哈哈哈哈哈 2哥 : 3妹看什么呢&#xff0c;笑的这么开森 3妹&#xff1a;2哥你快来看啊&#xff0c;成都欢乐谷的NPC模仿“唐僧”&#xff0c; 太搞笑了。 2哥 : 哦这个我也看到了&#xff0c;真的是唯妙唯肖&#xff0c;不能说像&#xff0c;只能说一模一…...

编程日记 2023/11/12 10:58:18

SpringBoot+MybatisPlus Restful示例

增删改查,分页 CREATE TABLE tbl_book ( id int NOT NULL AUTO_INCREMENT, type varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL, name varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL, desc_ription varchar(255) CHAR…...

编程日记 2023/11/12 10:57:17

【数据结构】树与二叉树（十一）：二叉树的层次遍历（算法LevelOrder）

文章目录 5.2.1 二叉树二叉树性质引理5.1&#xff1a;二叉树中层数为i的结点至多有 2 i 2^i 2i个&#xff0c;其中 i ≥ 0 i \geq 0 i≥0。引理5.2&#xff1a;高度为k的二叉树中至多有 2 k 1 − 1 2^{k1}-1 2k1−1个结点&#xff0c;其中 k ≥ 0 k \geq 0 k≥0。引理5.3&…...

编程日记 2023/11/12 10:56:16

【PyQt】(自制类)处理鼠标点击逻辑

写了个自认为还算不错的类&#xff0c;用于简化mousePressEvent、mouseMoveEvent和mouseReleaseEvent中的鼠标信息。 功能有以下几点&#xff1a; 鼠标当前状态&#xff0c;包括鼠标左/中/右键和单击/双击/抬起鼠标防抖(仅超出一定程度时才判断鼠标发生了移动)&#xff0c;灵…...

编程日记 2023/11/12 10:55:14

JAVA IDEA 下载

超简单步骤一&#xff1a; IntelliJ IDEA 官方下载链接 点击以上链接进入下图&#xff0c;点击下载 继续点下载&#xff0c;然后等待下载完后打开安装包即可 步骤二&#xff1a; 打开下好的安装包&#xff0c;点击Browse...我们把它下载到自己喜欢的地方&#xff08;主要是别占…...

编程日记 2023/11/12 10:54:13

保姆级教程：在Jetson Orin上从零搭建PyTorch+TensorFlow环境（含torchvision源码编译避坑）

保姆级教程&#xff1a;在Jetson Orin上从零搭建PyTorchTensorFlow环境&#xff08;含torchvision源码编译避坑&#xff09; NVIDIA Jetson Orin作为当前边缘计算领域的旗舰平台&#xff0c;其ARM架构下的深度学习环境配置一直是开发者的痛点。本文将手把手带你完成从系统准备到…...

编程新知 2026/4/13 2:06:25

Python如何声明变量_动态类型特性与变量命名规范

Python变量动态创建且类型由值决定&#xff0c;命名须符合规则&#xff1a;仅含字母、数字、下划线&#xff0c;不以数字开头&#xff0c;不能是关键字或内置函数名&#xff1b;区分大小写&#xff1b;支持类型提示但不强制运行时检查。Python 变量不需要声明类型&#xff0c;但…...

编程新知 2026/4/13 1:23:05

镜像视界空间智能体系统的核心原理是否涉及人工智能技术？

一句话结论涉及人工智能&#xff0c;但本质不是AI系统。我们的核心是空间计算系统&#xff0c;AI只是其中一个工具层。&#x1f9e0; 分层拆解1️⃣ 底层&#xff1a;不是AI ——是空间几何计算系统最核心的能力是&#xff1a;空间反演&#xff08;Pixel → World&#xff09;多…...

编程新知 2026/4/12 23:57:49

别再只调API了！深入OpenCV手势识别：肤色检测算法全解析与实战对比（RGB/YCrCb/OTSU）

深入OpenCV手势识别&#xff1a;肤色检测算法全解析与实战对比 手势识别作为人机交互的重要技术&#xff0c;其核心挑战之一是如何在复杂环境中准确分割皮肤区域。本文将深入探讨四种主流肤色检测算法——RGB阈值法、椭圆模型法、CrCb范围筛选法以及OTSU自适应阈值法&#xff0…...

编程新知 2026/4/12 23:49:43

五一出行必备：Bypass分流抢票神器全攻略

1. 为什么五一抢票这么难&#xff1f; 每到五一假期&#xff0c;抢票就成了无数人的噩梦。去年我提前两周盯着12306&#xff0c;结果开票瞬间所有车次秒灰&#xff0c;那种绝望感至今记忆犹新。后来才发现&#xff0c;普通用户和抢票软件根本不在同一起跑线上——当你在手动刷新…...

编程新知 2026/4/12 23:43:29

Harness：从智能交付平台到AI工程化范式的演进

Harness：从智能交付平台到AI工程化范式的演进 在人工智能与软件工程深度交融的今天，“Harness”一词已超越了其“马具”的本意，演变为一个承载着双重含义的关键术语。它既指向一个具体的、以AI驱动的软件交付平台，也代表了一套构建和管理AI智能体（Agent）的全新工程化范式…...

编程新知 2026/4/12 23:25:12

RLC电路仿真对比实验：Simulink原生模块 vs 自定义S函数谁更准？

RLC电路仿真精度对决&#xff1a;Simulink原生模块与S函数建模深度评测 在电力电子和控制系统仿真领域&#xff0c;Simulink作为行业标准工具&#xff0c;提供了两种截然不同的电路建模路径&#xff1a;一种是直接调用现成的RLC模块快速搭建电路&#xff0c;另一种则是通过S函数…...

编程新知 2026/4/12 23:09:05

SR、JK、T、D触发器：逻辑符号解析与特性方程对比

1. 触发器基础概念与分类 在数字电路设计中&#xff0c;触发器&#xff08;Flip-Flop&#xff09;是最基础的存储单元之一。简单来说&#xff0c;触发器就像是一个记忆开关&#xff0c;能够记住1位二进制信息&#xff08;0或1&#xff09;。想象一下家里的电灯开关——按一下开…...

编程新知 2026/4/12 23:07:05

Python3.10镜像使用全解析：Jupyter和SSH两种方式，满足不同开发需求

Python3.10镜像使用全解析&#xff1a;Jupyter和SSH两种方式&#xff0c;满足不同开发需求 1. Python3.10镜像概述 Python3.10镜像是一个基于Miniconda的轻量级Python环境管理工具&#xff0c;它提供了Python 3.10的核心运行环境以及常用的开发工具。这个镜像特别适合需要快速…...

编程新知 2026/4/12 22:21:08

别再只会ping了！用Wireshark亲手抓个包，看看你的网络请求到底说了啥

从零开始用Wireshark解剖网络数据包&#xff1a;一次真实的网络侦探之旅 每次点击网页或发送消息时&#xff0c;你的设备都在与远方服务器进行着复杂的对话。这些对话被封装成数据包&#xff0c;像信件一样在网络中传递。但你是否好奇过&#xff0c;这些"信件"里究竟…...

编程新知 2026/4/12 22:04:54