使用揭示模块模式开发VanillaJS切换库的注册回调覆盖问题

嘿，我完全懂你遇到的这个坑——这其实是揭示模块模式（Reveal Module Pattern）最常见的「单例冲突」问题！

问题根源 #

你最初写的toggler应该是一个单例模块：整个应用里只有一个实例，所有调用toggler()的地方共享同一个闭包状态（比如toggleAction变量）。所以当你先给.tab设置onToggle，再给.accordion-title设置onToggleAccordion时，后者直接覆盖了前者的回调函数。

举个例子，你的原始代码大概是这样的（典型的单例揭示模块）：

// 错误的单例实现
const toggler = (() => {
  let currentSelector;
  let toggleAction;

  function init() {
    // 绑定事件到currentSelector对应的元素
    document.querySelectorAll(currentSelector).forEach(el => {
      el.addEventListener('click', toggleAction);
    });
  }

  function setToggleAction(action) {
    toggleAction = action;
    return this; // 链式调用支持
  }

  return {
    setToggleAction,
    init
  };
})();

这里的toggleAction是共享的，每次调用setToggleAction都会替换它，自然会出现覆盖问题。

解决方案：把单例改成工厂函数 #

要让每个toggler(selector)调用都生成独立的实例，我们需要把模块改成工厂函数——每次调用都创建新的闭包，保存专属的状态（选择器、回调）。

修改后的代码示例：

// 正确的工厂函数实现
function toggler(targetSelector) {
  // 每个实例专属的状态变量
  let toggleCallback;

  // 初始化方法：绑定事件到目标元素
  function init() {
    const elements = document.querySelectorAll(targetSelector);
    elements.forEach(el => {
      el.addEventListener('click', () => {
        if (toggleCallback) {
          toggleCallback(el); // 调用当前实例的专属回调
        }
      });
    });
    return this; // 保持链式调用
  }

  // 设置回调的方法：只更新当前实例的toggleCallback
  function setToggleAction(callback) {
    toggleCallback = callback;
    return this; // 链式调用支持
  }

  // 返回当前实例的公共方法
  return {
    setToggleAction,
    init
  };
}

为什么这样能解决问题？ #

现在每次调用toggler('.tab')或toggler('.accordion-title')时，都会：

1. 创建一个新的闭包环境
2. 拥有自己独立的toggleCallback变量
3. 调用setToggleAction时只会修改当前实例的回调

这样你再执行：

toggler('.tab').setToggleAction(onToggle).init();
toggler('.accordion-title').setToggleAction(onToggleAccordion).init();

两个回调就会各自绑定到对应的元素上，再也不会互相覆盖了！

额外提示 #

如果你的库还有其他状态（比如缓存的DOM元素、切换状态标记），一定要把它们放到工厂函数内部，确保每个实例的状态都是独立的。

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