如何实现可调用用户自定义任意函数的JavaScript库？

嘿，这个想法挺棒的！完全可以实现让用户只提供函数名数组，由你的库自动完成函数注册和后续调用的逻辑，我给你捋捋具体的思路和实现方式：

核心思路 #

本质上就是让你的库根据用户提供的函数名，在指定的作用域（全局或者约定的对象）里查找对应的函数，自动完成映射注册，之后在特定时机统一触发这些函数。

方案1：全局作用域下的自动注册 #

如果用户习惯把钩子函数定义在全局（比如浏览器环境的window对象），可以用这种方式：

// 你的库实现
const MyHookLibrary = (() => {
  // 存储已注册的钩子函数映射
  const hookMap = new Map();

  // 接收用户传入的函数名数组，自动注册
  function registerHooks(hookNames) {
    hookNames.forEach(name => {
      // 检查全局作用域中是否存在该函数
      if (typeof window[name] === 'function') {
        hookMap.set(name, window[name]);
        console.log(`✅ 成功注册钩子: ${name}`);
      } else {
        console.warn(`⚠️ 未找到钩子函数 "${name}"，请确保它已定义在全局作用域`);
      }
    });
  }

  // 在特定时机触发所有注册的钩子
  function triggerAllHooks(...args) {
    hookMap.forEach((fn, name) => {
      try {
        // 支持给钩子传递参数
        fn(...args);
        console.log(`🔧 已执行钩子: ${name}`);
      } catch (err) {
        console.error(`❌ 执行钩子 "${name}" 出错:`, err);
      }
    });
  }

  return {
    registerHooks,
    triggerAllHooks
  };
})();

用户的使用方式会非常简洁：

// 用户代码：定义自己的钩子函数
function appInit() {
  console.log('应用初始化完成！');
}

function dataFetched() {
  console.log('远程数据获取完毕！');
}

// 只需要传入函数名数组即可完成注册
MyHookLibrary.registerHooks(['appInit', 'dataFetched']);

// 模拟特定时机触发（比如页面加载完成）
window.addEventListener('DOMContentLoaded', () => {
  // 还可以给钩子传参数
  MyHookLibrary.triggerAllHooks({ appVersion: '1.0.0' });
});

方案2：约定对象容器的自动注册 #

如果不想污染全局作用域，可以让用户把所有钩子函数放在一个自定义对象里，库从这个对象中查找注册：

// 你的库实现
const MyHookLibrary = (() => {
  const hookMap = new Map();

  // 接收钩子容器对象和函数名数组
  function registerHooks(hookContainer, hookNames) {
    if (typeof hookContainer !== 'object' || hookContainer === null) {
      console.error('❌ 钩子容器必须是一个非空对象');
      return;
    }

    hookNames.forEach(name => {
      if (typeof hookContainer[name] === 'function') {
        hookMap.set(name, hookContainer[name]);
        console.log(`✅ 成功注册钩子: ${name}`);
      } else {
        console.warn(`⚠️ 钩子容器中未找到函数 "${name}"`);
      }
    });
  }

  // 触发逻辑和方案1一致
  function triggerAllHooks(...args) {
    hookMap.forEach((fn, name) => {
      try {
        fn(...args);
        console.log(`🔧 已执行钩子: ${name}`);
      } catch (err) {
        console.error(`❌ 执行钩子 "${name}" 出错:`, err);
      }
    });
  }

  return {
    registerHooks,
    triggerAllHooks
  };
})();

用户使用示例：

// 用户代码：把钩子放在自定义对象里
const appHooks = {
  init() {
    console.log('应用初始化');
  },
  afterRender() {
    console.log('页面渲染完成');
  },
  onDataReady(data) {
    console.log('数据就绪:', data);
  }
};

// 传入容器对象和函数名数组
MyHookLibrary.registerHooks(appHooks, ['init', 'afterRender', 'onDataReady']);

// 触发钩子并传参
MyHookLibrary.triggerAllHooks({ userInfo: { name: 'Jack' } });

一些额外优化建议 #

• 重复注册处理：可以在registerHooks里判断hookMap是否已存在该函数名，避免重复注册覆盖或者抛出提示
• 钩子优先级：如果需要控制钩子的执行顺序，可以让用户传入包含名字和优先级的数组，触发时按排序后的顺序执行
• 钩子卸载：提供unregisterHook(name)方法，允许用户移除某个已注册的钩子

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