如何在 ES 模块中安全地将函数导出到全局 window 命名空间-js教程-PHP中文网

ES 模块默认隔离作用域，直接赋值 window.add = add 会因模块脚本异步执行而失效；需通过延迟执行、显式等待或动态导入确保全局函数在非模块脚本运行前已就绪。

es 模块默认隔离作用域，直接赋值 `window.add = add` 会因模块脚本异步执行而失效；需通过延迟执行、显式等待或动态导入确保全局函数在非模块脚本运行前已就绪。

在现代 JavaScript 中，<script type="module"> 默认以异步、延迟（defer）方式执行，且其执行时机晚于普通 <script> 标签（即使 HTML 中后者写在后面）。这导致你在模块内给 window.add 赋值的操作，总是在非模块脚本尝试调用 window.add(1, 2) <strong>之后才发生——因此报错 Uncaught TypeError: window.add is not a function。</script>

✅ 正确做法：确保执行时序可控

方案 1：将依赖逻辑也改为模块（推荐）

最符合现代实践的方式是统一使用模块系统，避免混合模式：

<!-- index.html -->
<script type="module">
  const add = (a, b) => a + b;
  window.add = add; // 现在 window.add 已就绪
</script><script type="module">
  // 同样是模块，保证在 window.add 设置后执行
  console.log(window.add(1, 2)); // ✅ 输出 3
</script>

✅ 优势：语义清晰、无竞态、可维护性强；✅ 符合 ES 模块设计初衷。

方案 2：使用 DOMContentLoaded 或 setTimeout(0) 延迟执行（兼容旧场景）

若必须保留非模块脚本（如遗留代码），可在其中等待全局函数就绪：

<script type="module">
  const add = (a, b) => a + b;
  window.add = add;
  console.log('✅ Global add registered');
</script><script>
  // 确保 DOM 加载完成后再检查（但不保证模块已执行）
  document.addEventListener('DOMContentLoaded', () => {
    if (typeof window.add === 'function') {
      console.log(window.add(1, 2)); // ✅ 安全调用
    } else {
      console.warn('⚠️  window.add not ready yet — consider using modules consistently.');
    }
  });
</script>

更健壮的等待方式（带超时兜底）：

<script>
  function waitForGlobalAdd(timeout = 1000) {
    return new Promise((resolve, reject) => {
      const start = Date.now();
      const check = () => {
        if (typeof window.add === 'function') {
          resolve(window.add);
        } else if (Date.now() - start > timeout) {
          reject(new Error('Timeout: window.add never became available'));
        } else {
          setTimeout(check, 10);
        }
      };
      check();
    });
  }

  waitForGlobalAdd()
    .then(add => console.log(add(1, 2)))
    .catch(err => console.error(err));
</script>

❌ 不推荐：仅靠 setTimeout(0) 或顺序书写

<!-- 错误示例 —— 仍可能失败 -->
<script type="module">
  window.add = (a, b) => a + b;
</script><script>
  setTimeout(() => console.log(window.add(1,2)), 0); // ❌ 不可靠：模块执行本身是微任务/延迟任务，时机不可控
</script>