如何实现一个简单的发布订阅模式

最新推荐文章于 2024-06-04 17:21:52 发布

wmui

最新推荐文章于 2024-06-04 17:21:52 发布

阅读量754

点赞数

分类专栏：聚享小站文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/wxq1308017/article/details/123180726

版权

发布订阅模式常用于解决跨页面通信问题，如根据用户登录状态动态更新页面内容。其核心思想是事件绑定和触发相互独立，支持动态增删事件。实现包括存储事件的变量、监听方法（添加事件）、删除方法（移除事件）和触发方法（执行事件）。通过这种方式，可以在不直接耦合的情况下实现组件间的通信。

摘要由CSDN通过智能技术生成

背景

在业务开发中，经常会遇到要处理跨页面通信的问题，比如说用户打开了一个网站，网站的某些页面需要根据用户的登录的状态不同，显示不同的数据。显然这需要我们在登录成功的那一刻，
去通知到那些需要改变的页面。为了解决类似这样的问题，发布订阅模式诞生了。

思路

一个简单的发布订阅模式需要事件的绑定和触发是互相隔离的，同时支持动态的添加和删除事件。基于此就有了一个思路：

定义一个变量存储这些事件
定义一个监听方法，用于把事件添加到事件变量中
定义一个删除方法，用于把是事件从变量中移除
定义一个触发方法，用于调用变量中的事件

实现

根据上面的思路，大致可以知道使用方式类似下面：

var emitter = new EventEmitter();

var handle = function (data) {
    console.log(data)
}

// 页面A订阅LOGIN事件
emitter.on('LOGIN', handle)


// 登录成功，触发发布
emitter.emit('LOGIN', {user: { name: 'Jan', age: 18}})

具体代码实现

function EventEmitter() {
  // 事件变量
    this._event = {}
}

// 添加订阅
EventEmitter.prototype.on= function (type, handle) {
    this._event[type] = this._event[type]