JavaScript模块中通过字符串引用函数的方法咨询

ES模块拥有独立的私有作用域，模块内的变量、函数不会自动挂载到window对象，所以传统的window["my_func"]调用方式在模块环境中无效，也不推荐手动把所有函数挂到window上（会污染全局作用域）。你可以用以下模块作用域内的方案实现类似需求：

• 创建本地函数映射表
  这是最直接的替代方式。在模块内部定义一个对象，将需要动态调用的函数作为属性存入，之后通过对象的键名来动态调用，逻辑和window["my_func"]一致，但完全在模块作用域内运行。

  示例代码：

  // main.js 模块内部
  function handleButtonA() {
    console.log('按钮A被点击');
  }
  
  function handleButtonB() {
    console.log('按钮B被点击');
  }
  
  // 定义函数映射表
  const functionMap = {
    handleButtonA,
    handleButtonB
  };
  
  // 绑定按钮点击事件，动态调用函数
  document.addEventListener('click', (e) => {
    const targetBtn = e.target;
    if (targetBtn.hasAttribute('data-func')) {
      const funcName = targetBtn.dataset.func;
      // 检查函数是否存在，避免报错
      if (typeof functionMap[funcName] === 'function') {
        functionMap[funcName]();
      }
    }
  });
  

  使用时只需给按钮添加data-func属性指定函数名，比如：

  <button data-func="handleButtonA">点击执行A</button>
  <button data-func="handleButtonB">点击执行B</button>
  

• 跨模块共享的命名空间方案
  如果需要在其他模块中也能动态调用这些函数，可以将函数映射对象导出，其他模块通过import引入使用，同样不需要依赖全局window。

  示例：

  // main.js
  function handleButtonA() { /* ... */ }
  function handleButtonB() { /* ... */ }
  
  export const functionMap = {
    handleButtonA,
    handleButtonB
  };
  

  在其他模块中调用：

  import { functionMap } from '/js/main.js';
  functionMap['handleButtonA']();
  

• 注意要点

  • 动态调用前务必检查函数是否存在，避免因拼写错误或无效函数名导致运行时错误。
  • 这种方式符合ES模块的设计理念，既能实现动态调用需求，又能避免全局作用域污染，比挂载window更安全可控。

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