使用 pubsub-js 进行消息发布订阅
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-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>
简单使用
以更新未读消息数量为例。
- 首先，新建一个
pubsub.js文件
import PubSub from 'pubsub-js'export default PubSub
- 使用
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)
})
- 使用
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 通过发布/订阅模式实现实现组件间的解耦合，可以减少代码的复杂度和维护成本，使代码设计更人性化。