javascript闭包如何实现发布订阅-js教程-PHP中文网

闭包实现发布订阅模式的核心在于利用闭包封装私有状态，通过1.创建函数内部的订阅者列表；2.返回subscribe、publish、unsubscribe等操作方法；3.使内部变量被返回函数引用从而持久化；4.确保外部无法直接访问状态，实现数据安全与模块解耦；该模式适用于组件通信、异步通知、状态同步等场景，但需注意内存泄漏、调试困难、this指向及事件流失控等潜在问题，必须合理管理订阅生命周期并规范事件设计，以保障系统稳定性和可维护性。

javascript闭包如何实现发布订阅

JavaScript闭包实现发布订阅模式，核心在于利用闭包的特性来封装和管理事件中心的状态。简单来说，就是创建一个函数，这个函数内部维护一个订阅者列表，并返回一套操作这个列表的方法（如订阅、发布）。这样，订阅者列表就成了私有变量，只能通过返回的方法进行操作，外部无法直接访问或修改，从而确保了数据安全和模块间的解耦。

解决方案

要用闭包实现发布订阅，我们通常会构建一个模块，它对外暴露

subscribe

登录后复制

（订阅）和

publish

登录后复制

（发布）方法，而内部的事件存储（比如一个对象，键是事件名，值是回调函数数组）则被闭包“私有化”了。

想象一下，我们有一个

eventBus

登录后复制

对象。这个对象不是直接声明在全局的，而是在一个函数作用域内被创建，然后通过该函数返回。

立即学习“Java免费学习笔记（深入）”；

const createEventBus = () => {
    // 这是一个内部变量，用于存储所有事件及其对应的回调函数
    // 它被闭包“捕获”了，外部无法直接访问
    const subscribers = {};

    return {
        /**
         * 订阅事件
         * @param {string} eventName - 事件名称
         * @param {function} callback - 回调函数
         */
        subscribe: function(eventName, callback) {
            if (!subscribers[eventName]) {
                subscribers[eventName] = [];
            }
            subscribers[eventName].push(callback);
            // 随便加点日志，看看有没有订阅成功
            // console.log(`[EventBus] ${eventName} subscribed.`);
        },

        /**
         * 发布事件
         * @param {string} eventName - 事件名称
         * @param {any} data - 传递给回调函数的数据
         */
        publish: function(eventName, data) {
            if (subscribers[eventName]) {
                // 遍历所有订阅者并执行回调
                subscribers[eventName].forEach(callback => {
                    try {
                        callback(data);
                    } catch (e) {
                        console.error(`[EventBus] Error executing callback for ${eventName}:`, e);
                    }
                });
            }
        },

        /**
         * 取消订阅（可选，但通常很有用）
         * @param {string} eventName - 事件名称
         * @param {function} callback - 要取消的回调函数
         */
        unsubscribe: function(eventName, callback) {
            if (subscribers[eventName]) {
                subscribers[eventName] = subscribers[eventName].filter(cb => cb !== callback);
                // console.log(`[EventBus] ${eventName} unsubscribed.`);
            }
        },

        // 也可以加一个清除所有订阅的方法，看需求了
        clear: function() {
            for (const key in subscribers) {
                delete subscribers[key];
            }
            // console.log('[EventBus] All subscriptions cleared.');
        }
    };
};

// 创建一个事件总线实例
const eventBus = createEventBus();

// 示例用法
const handler1 = (msg) => console.log('Handler 1 received:', msg);
const handler2 = (msg) => console.log('Handler 2 received:', msg);

eventBus.subscribe('userLoggedIn', handler1);
eventBus.subscribe('userLoggedIn', handler2);
eventBus.subscribe('dataUpdated', (data) => console.log('Data updated:', data));

eventBus.publish('userLoggedIn', { userId: 123, username: 'Alice' });
// Handler 1 received: { userId: 123, username: 'Alice' }
// Handler 2 received: { userId: 123, username: 'Alice' }

eventBus.publish('dataUpdated', [1, 2, 3]);
// Data updated: [1, 2, 3]

eventBus.unsubscribe('userLoggedIn', handler1);
eventBus.publish('userLoggedIn', { userId: 456, username: 'Bob' });
// Handler 2 received: { userId: 456, username: 'Bob' } (handler1 不再接收)

登录后复制

这个

createEventBus

登录后复制

函数就是关键。每次调用它，都会创建一个新的

subscribers

登录后复制

对象，并返回一套新的

subscribe

登录后复制

、

publish

登录后复制

等方法。这些方法共享并操作着同一个

subscribers

登录后复制

对象，但这个对象对于外部来说是不可见的，它只存在于

createEventBus

登录后复制

调用形成的闭包作用域内。这种模式在很多库和框架里都非常常见，它提供了一种非常优雅的解耦方式。

为什么闭包是实现发布订阅模式的理想选择？

从我个人经验来看，闭包简直是为发布订阅模式量身定制的。它最核心的优势在于数据封装和状态维护。你想想看，一个事件中心，它最关键的数据就是“谁订阅了什么事件”。这个订阅者列表（我们代码里的

subscribers

登录后复制

对象）如果被不小心在外部修改了，那整个事件机制可能就乱套了，比如某个订阅者被无意中删除了，或者加入了不合法的订阅。

闭包就完美解决了这个问题。通过将

subscribers

登录后复制

定义在

createEventBus

登录后复制

函数内部，并让

subscribe

登录后复制

、

publish

登录后复制

等方法访问它，我们实际上创建了一个私有作用域。外部代码无法直接访问

subscribers

登录后复制

，只能通过

eventBus

登录后复制

实例提供的公共方法来间接操作。这就像给你的核心数据加了一道门，你只能通过门卫（

subscribe

登录后复制

publish

登录后复制

方法）才能进出，而不是随便就能闯进去。

这种封装性带来的好处是显而易见的：

安全性提升： 避免了全局变量污染和意外修改。在一个大型应用里，如果每个模块都直接操作一个全局事件列表，那简直是灾难。
模块化和解耦：
```
eventBus
```
登录后复制
实例变成了一个独立的、自包含的单元。它管理自己的状态，不依赖外部变量，也不暴露内部细节。这使得各个组件可以独立地发布和订阅事件，而无需知道彼此的具体实现，大大降低了模块间的耦合度。
状态持久化：
```
subscribers
```
登录后复制
列表在
```
createEventBus
```
登录后复制
函数执行完毕后并没有被销毁，因为它被返回的
```
subscribe
```
登录后复制
和
```
publish
```
登录后复制
方法引用着。只要这些方法存在，
```
subscribers
```
登录后复制
就会一直存在，并维护着事件中心的状态。这正是闭包的魅力所在——它让内部变量的生命周期超出了函数执行的范围。

所以，闭包提供了一种既安全又优雅的方式来管理发布订阅模式中的内部状态，让整个机制变得健壮且易于维护。

发布订阅模式在实际应用中有什么典型场景？

发布订阅模式在实际开发中简直无处不在，尤其是在前端领域，它简直是解耦的万金油。我见过太多场景，它能把原本盘根错节的依赖关系梳理得清清楚楚。

UI 组件通信： 这是最常见的场景之一。比如，你有一个用户列表组件和一个用户详情组件。当用户列表中的某个用户被点击时，它发布一个
```
userSelected
```
登录后复制
事件，并带上用户ID。用户详情组件订阅这个
```
userSelected
```
登录后复制
事件，一旦接收到，就根据ID去加载并显示用户详情。这样，用户列表组件不需要知道用户详情组件的存在，反之亦然，它们只通过事件总线进行沟通。这种方式比直接调用对方的方法要灵活得多。
异步操作完成通知： 想象一下，你发起了一个AJAX请求来获取数据。数据回来后，你可能需要更新多个UI部分，或者触发其他业务逻辑。与其在AJAX回调里一个接一个地调用这些函数，不如让AJAX回调发布一个
```
dataFetched
```
登录后复制
事件，然后所有关心这个数据的组件或模块都去订阅这个事件。数据一到，大家各取所需，互不干扰。这让你的异步代码结构清晰，易于扩展。

豆包爱学
豆包旗下AI学习应用

674

查看详情
跨模块/跨页面的状态同步： 在一些复杂的单页应用中，不同模块或甚至不同iframe之间可能需要共享或同步状态。发布订阅提供了一种轻量级的机制。一个模块的状态发生变化，就发布一个事件；其他需要这个状态的模块订阅该事件并更新自己。这比直接传递数据或通过全局变量要安全和灵活得多。
日志记录和监控： 你的应用中可能有很多地方需要记录日志或者发送监控数据。你可以定义一个
```
log
```
登录后复制
事件或
```
error
```
登录后复制
事件。当任何地方发生需要记录的事件时，就发布这个事件。而真正的日志记录器或监控上报器则订阅这些事件，集中处理。这样，你的业务逻辑代码就不用关心日志怎么存、监控怎么发，只管“通知”就行了。
前端框架内部机制： 很多现代前端框架（比如Vue的事件总线，或者React中一些非父子组件通信的解决方案）在底层都广泛使用了发布订阅模式。它提供了一种低耦合的事件处理机制，让组件之间可以松散地协作。

总的来说，每当你发现两个模块或组件之间存在直接依赖，并且这种依赖让你觉得代码不够灵活、难以扩展时，发布订阅模式就值得考虑了。它能把“你来调用我”的直接关系，变成“我发出通知，谁爱听谁听”的广播关系，大大提升了系统的可维护性和扩展性。

实现发布订阅时，闭包可能带来哪些潜在的挑战或需要注意的点？

尽管闭包在实现发布订阅模式时非常强大，但它也不是没有“脾气”的。在使用过程中，确实有一些需要注意的地方，不然可能会遇到一些意料之外的问题，或者让代码变得不那么容易调试。

内存泄漏的风险： 这是最常见也最容易被忽视的问题。当一个回调函数被订阅到事件总线后，它就被
```
subscribers
```
登录后复制
列表引用着。如果这个回调函数是一个组件的方法，或者它捕获了某个大型对象作为其闭包的一部分，那么只要这个订阅没有被取消，这个回调函数及其捕获的变量就不会被垃圾回收。这意味着即使你的组件从DOM中移除了，它相关的回调函数可能仍然存在于事件总线的
```
subscribers
```
登录后复制
列表中，导致内存无法释放。

所以，提供并强制使用
```
unsubscribe
```
登录后复制
方法变得尤为重要。在组件销毁时（例如React的
```
componentWillUnmount
```
登录后复制
或Vue的
```
beforeDestroy
```
登录后复制
生命周期钩子），务必调用
```
unsubscribe
```
登录后复制
来清理订阅。否则，随着应用的运行，
```
subscribers
```
登录后复制
列表可能会变得越来越庞大，堆积了大量无用的回调函数，最终导致内存占用过高。
调试的复杂性： 闭包的优点是封装，但封装过度有时也会带来调试上的不便。
```
subscribers
```
登录后复制
变量是私有的，你不能直接在控制台里
```
console.log(eventBus.subscribers)
```
登录后复制
来查看当前有多少订阅、都是些什么订阅。当你发现某个事件没有被触发，或者触发了不该触发的事件时，你可能需要通过在
```
subscribe
```
登录后复制
或
```
publish
```
登录后复制
方法内部打断点或加日志来查看
```
subscribers
```
登录后复制
的状态，这比直接访问公共变量要麻烦一些。
```
this
```
登录后复制
上下文问题： 在JavaScript中，函数内部的
```
this
```
登录后复制
关键字的行为有时会让人困惑。如果你订阅的回调函数是一个普通函数，并且它内部使用了
```
this
```
登录后复制
，那么当这个回调被事件总线调用时，
```
this
```
登录后复制
的指向可能不是你期望的。它通常会指向
```
window
```
登录后复制
（严格模式下是
```
undefined
```
登录后复制
），而不是你原来定义这个回调时的对象。

解决这个问题的方法通常是使用箭头函数（箭头函数没有自己的
```
this
```
登录后复制
，它会捕获定义时的
```
this
```
登录后复制
），或者在订阅时使用
```
bind
```
登录后复制
方法来绑定
```
this
```
登录后复制
上下文：
```
eventBus.subscribe('myEvent', myObject.myMethod.bind(myObject))
```
登录后复制
。这虽然不是闭包本身的问题，但它是使用闭包实现发布订阅时，你经常需要考虑的一个细节。
滥用可能导致逻辑模糊： 虽然发布订阅解耦了模块，但如果过度使用，或者事件命名不规范，可能会导致事件流变得难以追踪。当一个事件被发布后，你可能不知道到底有多少个订阅者会响应，以及它们会做什么。这就像一个广播电台，你只知道它发出了信号，但不知道有多少收音机在听，以及它们收到信号后各自会播放什么。因此，在设计事件时，清晰的事件命名和文档记录变得非常重要。