使用 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

引入 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 通过发布/订阅模式实现实现组件间的解耦合,可以减少代码的复杂度和维护成本,使代码设计更人性化。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中使用pubsub-js的步骤如下: 1. 首先,在项目中安装pubsub-js。可以使用npm或yarn命令进行安装,例如:npm i pubsub-js 或 yarn add pubsub-js。 2. 在需要发布消息的组件和需要订阅消息的组件中引入pubsub-js。可以使用import语句导入pubsub-js,例如:import pubsub from 'pubsub-js'。 3. 在Vue的Main.js文件中执行PubSub的全局注册。可以使用import语句导入PubSub,并将其挂载到Vue的原型上,以便在所有组件中都能访问到pubsub-js的功能。例如:Vue.prototype.PubSub = PubSub。 4. 在发布消息的组件中使用this.publish方法来发送消息。例如:this.publish("msg", "要发送的消息")。其中,msg是必须的参数,用于指定消息的标识符,要发送的消息可以作为第二个参数传递。 5. 在订阅消息的组件中使用this.subscribe方法来接收消息。例如:this.subscribe("msg", (msg, data) => { // 接收的数据 alert(data) })。其中,msg参数是订阅消息的标识符,data参数是接收到的消息的数据。 6. 如果需要取消某个订阅,可以使用pubsub.unsubscribe方法。具体的取消订阅的操作可以根据实际需求进行编写。 综上所述,以上是在Vue中使用pubsub-js的步骤。通过这些步骤,你可以在Vue项目中实现消息发布订阅功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue学习(十六)消息订阅发布pubsub-js)](https://blog.csdn.net/qq_29107721/article/details/125349357)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [一、PubSub 的Vue使用方式](https://blog.csdn.net/weixin_52834606/article/details/124636609)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值