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

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

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

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

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

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

subscribe

),一个用来移除观察者(

unsubscribe

),还有一个是关键的,用来遍历这个数组并调用所有观察者的回调(

notify

)。这些方法都共享并操作着那个私有的观察者数组,而这个数组之所以能一直存在并被访问,正是闭包的功劳。

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

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

observers

数组包裹在自己的作用域里,外部代码无法直接访问或修改它,只能通过你暴露出来的

subscribe

unsubscribe

方法来间接操作。这种封装性,让整个模式的实现显得特别干净、安全,也符合我们对模块化、解耦的追求。你不需要担心哪个外部代码不小心把你的订阅者列表给清空了,或者加了些不该加的东西。它就是那么稳妥地待在那里,等待被调用。

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

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这样的响应式编程库),它们提供了更强大的事件管理、流控制和错误处理能力。

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享