0

0

javascript闭包怎样实现观察者模式

煙雲

煙雲

发布时间:2025-08-15 11:29:01

|

664人浏览过

|

来源于php中文网

原创

闭包能实现观察者模式是因为它提供了私有且持久的变量存储,使得订阅者列表\_subscribers被安全封装在函数作用域内,外部无法直接访问;2. subscribe、unsubscribe和notify方法通过闭包共享\_subscribers数组,实现对观察者的增删查和通知;3. 每次调用createeventbus都会创建独立的闭包环境,保证多个实例间互不干扰;4. 实际使用中需注意内存泄漏问题,即组件销毁时应主动取消订阅以避免残留回调引用导致无法回收;5. 通知顺序依赖订阅顺序,若需优先级控制则需扩展逻辑;6. 单个观察者报错可能中断通知流程,因此需用try...catch包裹回调执行以确保其他观察者仍能收到消息;7. 在复杂场景下,手动管理大量事件和订阅者会变得困难,建议引入eventemitter或rxjs等专业库进行更高效的事件流管理。

javascript闭包怎样实现观察者模式

说实话,用JavaScript闭包来实现观察者模式,这事儿真挺巧妙的。它核心的思路就是,让一个函数(或者说,它返回的对象)能记住并管理它自己的一堆“听众”——那些对它的状态变化感兴趣的部分。这样,当它内部发生点什么事儿的时候,就能悄咪咪地通知到所有这些听众,而且这个听众列表还是它自己的私有财产,外面轻易动不了。

javascript闭包怎样实现观察者模式

要实现这套机制,我们通常会创建一个函数,这个函数内部维护一个数组来存放所有的观察者(也就是那些回调函数)。然后,它会暴露出几个方法:一个用来添加观察者(

subscribe
),一个用来移除观察者(
unsubscribe
),还有一个是关键的,用来遍历这个数组并调用所有观察者的回调(
notify
)。这些方法都共享并操作着那个私有的观察者数组,而这个数组之所以能一直存在并被访问,正是闭包的功劳。

为什么说闭包是实现观察者模式的“自然”选择?

我个人觉得,闭包和观察者模式简直是天作之合。你想啊,观察者模式的核心不就是“一个主体(发布者)要管理一堆订阅者,并在特定事件发生时通知它们”吗?这里面最关键的一点,就是那个订阅者列表,它必须是主体的“私有财产”,不能随便被外部篡改,同时还得是持久化的,不能每次调用都重新初始化。闭包天然就提供了这种私有性和持久性。它把

observers
数组包裹在自己的作用域里,外部代码无法直接访问或修改它,只能通过你暴露出来的
subscribe
unsubscribe
方法来间接操作。这种封装性,让整个模式的实现显得特别干净、安全,也符合我们对模块化、解耦的追求。你不需要担心哪个外部代码不小心把你的订阅者列表给清空了,或者加了些不该加的东西。它就是那么稳妥地待在那里,等待被调用。

立即学习Java免费学习笔记(深入)”;

AI Word
AI Word

一款强大的 AI 智能内容创作平台,致力于帮助用户高效生成高质量、原创且符合 SEO 规范的各类文章。

下载
javascript闭包怎样实现观察者模式

闭包实现观察者模式的具体代码示例与解析

来,我们直接看段代码,这样更直观。假设我们要创建一个简单的事件发布器:

function createEventBus() {
    let _subscribers = []; // 这是一个私有变量,通过闭包保持持久性

    return {
        /**
         * 订阅事件
         * @param {Function} callback - 观察者回调函数
         * @returns {Function} - 返回一个取消订阅的函数,方便链式调用或直接取消
         */
        subscribe: function(callback) {
            if (typeof callback !== 'function') {
                console.warn('订阅者必须是一个函数!');
                return;
            }
            _subscribers.push(callback);
            console.log('有新的订阅者加入!当前订阅数:', _subscribers.length);

            // 返回一个取消订阅的函数,这是个很实用的模式
            // 注意:这里的 `this` 指向返回的对象,确保 unsubscribe 正确调用
            return () => {
                this.unsubscribe(callback);
            };
        },

        /**
         * 取消订阅
         * @param {Function} callback - 要移除的观察者回调函数
         */
        unsubscribe: function(callback) {
            _subscribers = _subscribers.filter(sub => sub !== callback);
            console.log('有订阅者离开了。当前订阅数:', _subscribers.length);
        },

        /**
         * 通知所有订阅者
         * @param {*} data - 要传递给观察者的数据
         */
        notify: function(data) {
            console.log('开始通知所有订阅者...');
            _subscribers.forEach(callback => {
                try {
                    callback(data);
                } catch (error) {
                    // 实际项目中这里可能需要更复杂的错误处理,比如记录日志
                    console.error('通知某个订阅者时出错:', error);
                }
            });
            console.log('通知完成。');
        }
    };
}

// 使用示例:
const myEventBus = createEventBus();

// 观察者1
const observer1 = (message) => {
    console.log('观察者1 收到消息:', message);
};

// 观察者2
const observer2 = (message) => {
    console.log('观察者2 收到消息:', message.toUpperCase());
};

// 订阅
const unsubscribe1 = myEventBus.subscribe(observer1);
myEventBus.subscribe(observer2);
myEventBus.subscribe((data) => { // 匿名函数也可以
    console.log('匿名观察者收到:', data.length, '个字符');
});

console.log('\n--- 第一次通知 ---');
myEventBus.notify('Hello World');

// 取消订阅一个观察者
unsubscribe1(); // 或者 myEventBus.unsubscribe(observer1);

console.log('\n--- 第二次通知 ---');
myEventBus.notify('Goodbye');

// 尝试订阅一个非函数
myEventBus.subscribe('not a function');

这段代码里,

_subscribers
数组就是被
createEventBus
函数的闭包“捕获”的。每次调用
createEventBus()
都会创建一个新的、独立的
_subscribers
数组,以及一套操作这个数组的方法。这意味着,你创建的每个
myEventBus
实例都有自己独立的订阅者列表,互不干扰。
subscribe
unsubscribe
notify
这三个方法,无论何时被调用,都能访问到并操作它们共同作用域里的那个
_subscribers
数组,即使
createEventBus
函数本身已经执行完毕,它的作用域也因为闭包的存在而没有被销毁。这就是闭包在这里的核心魔力。

javascript闭包怎样实现观察者模式

这种实现方式有哪些潜在的挑战或需要注意的地方?

虽然闭包实现观察者模式很优雅,但实际使用中还是有些坑或者说需要注意的地方:

  • 内存泄漏风险(不取消订阅):这是最常见的。如果一个组件订阅了某个事件,但在它被销毁时没有取消订阅,那么即使组件的DOM元素被移除了,它的回调函数仍然存在于发布者的
    _subscribers
    列表中。这意味着,这个回调函数以及它闭包引用的所有变量(包括旧的DOM元素等)都无法被垃圾回收,导致内存泄漏。所以,养成好习惯,哪里订阅了,哪里就得考虑取消订阅。比如在React的
    useEffect
    清理函数里,或者Vue的
    beforeDestroy
    钩子里。
  • 通知顺序不确定性:我们这个简单的
    forEach
    循环通知,是按照订阅的先后顺序来执行的。但在某些复杂场景下,你可能需要特定的通知顺序(比如优先级高的先执行),那这个简单的实现就不够了,需要额外逻辑来管理订阅者的顺序。
  • 错误处理:如果某个观察者的回调函数在执行时抛出了错误,默认情况下,这个错误可能会中断整个
    notify
    循环,导致后续的观察者无法收到通知。像我上面代码里加了个
    try...catch
    ,这是个基本的防御,但在生产环境,你可能需要更健壮的错误日志和处理机制,比如即使某个观察者报错,也要确保其他观察者能正常收到通知。
  • “僵尸”观察者问题:这其实是内存泄漏的一种表现。如果一个观察者对象本身已经被销毁,但它的回调函数还在订阅列表中,当发布者尝试通知它时,可能会因为访问不到它内部的某些状态而报错。虽然JavaScript的垃圾回收机制在这方面比C++之类的语言友好很多,但概念上还是值得注意。
  • 复杂场景下的管理:对于只有少数几个事件和观察者的简单应用来说,这种模式很好用。但如果你的应用有几十上百种事件,每个事件又有大量的订阅者,那么手动管理这些
    subscribe
    /
    unsubscribe
    调用就会变得非常繁琐且容易出错。这时候,你可能需要引入更高级的事件库(比如EventEmitter,或者RxJS这样的响应式编程库),它们提供了更强大的事件管理、流控制和错误处理能力。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

552

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

731

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

477

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

394

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

656

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

551

2023.09.20

Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

2

2026.01.14

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 6.4万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 1.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号