JavaScript自定义信号发射器（回调存储）实现问题咨询

嘿，我来帮你搞定这个自定义回调存储的问题！先看看你当前代码里的几个核心问题，再一步步把逻辑迁移到合理的结构里。

先分析你现有代码的问题 #

• 每次调用都会重置回调：你把detonationCallback.callbacks = []写在了函数内部，每次执行DetonationCallback()都会清空之前添加的所有回调，完全没法持久存储。
• 触发回调的逻辑错误：循环里的callback[i]是个笔误，应该是detonationCallback.callbacks[i]，不然会因为找不到callback变量报错。
• 逻辑耦合严重：初始化、添加回调、触发回调的逻辑全堆在一个函数里，既不符合单一职责，也不便于复用和维护。

方案1：单例模式（全局唯一的信号发射器） #

如果你只需要一个全局的回调存储，用这种模式最合适——通过IIFE创建私有作用域，保护回调数组不被外部随意修改，同时暴露清晰的操作方法：

const DetonationSignal = (function() {
  // 私有存储：外部无法直接访问或修改
  const callbacks = [];

  return {
    // 添加回调：先校验是否为函数，避免无效添加
    add: function(callback) {
      if (typeof callback === 'function') {
        callbacks.push(callback);
      }
    },
    // 触发所有回调：支持传递任意参数给回调函数
    trigger: function(...args) {
      callbacks.forEach(callback => {
        callback.apply(this, args);
      });
    },
    // 可选：移除指定回调
    remove: function(callback) {
      const index = callbacks.indexOf(callback);
      if (index !== -1) {
        callbacks.splice(index, 1);
      }
    }
  };
})();

使用示例

// 添加两个回调
DetonationSignal.add(function(warning) {
  console.log('收到爆炸警告1:', warning);
});

DetonationSignal.add(function(warning) {
  console.log('收到爆炸警告2:', warning);
});

// 触发所有回调，传递参数
DetonationSignal.trigger('距离爆炸还有10秒！');

// 移除某个回调
const tempCallback = function(warning) { console.log('临时监听:', warning); };
DetonationSignal.add(tempCallback);
DetonationSignal.remove(tempCallback);

方案2：构造函数模式（可实例化多个独立发射器） #

如果需要多个互不干扰的回调存储（比如不同事件用不同的发射器），用构造函数模式可以创建多个独立实例：

function DetonationSignal() {
  // 每个实例拥有独立的回调数组，互不影响
  this.callbacks = [];
}

// 把方法挂载到原型上，节省内存
DetonationSignal.prototype = {
  add: function(callback) {
    if (typeof callback === 'function') {
      this.callbacks.push(callback);
    }
  },
  trigger: function(...args) {
    this.callbacks.forEach(callback => {
      callback.apply(this, args);
    });
  },
  remove: function(callback) {
    const index = this.callbacks.indexOf(callback);
    if (index !== -1) {
      this.callbacks.splice(index, 1);
    }
  }
};

使用示例

// 创建两个独立的信号发射器实例
const bombSignal = new DetonationSignal();
const fireSignal = new DetonationSignal();

// 分别添加回调
bombSignal.add(() => console.log('炸弹信号触发！'));
fireSignal.add(() => console.log('火灾信号触发！'));

// 触发各自的回调，互不干扰
bombSignal.trigger(); // 输出：炸弹信号触发！
fireSignal.trigger(); // 输出：火灾信号触发！

关于逻辑迁移的核心思路 #

把你原来的代码拆解成三个独立的逻辑块，各自放到合适的位置：

1. 初始化回调数组：单例模式里放在私有作用域（避免外部篡改），构造函数里作为实例属性（每个实例独立拥有）。
2. 添加回调：抽成单独的add方法，负责校验函数有效性并添加到数组。
3. 触发回调：抽成单独的trigger方法，遍历数组执行每个回调，并把触发时的参数传递给它们。

这样拆分后，代码结构清晰、职责明确，也解决了你原来的所有问题。

内容的提问来源于stack exchange，提问作者yrslvrtfmv