HTML中ES模块导出JS方法详解

本文针对HTML中调用ES模块导出的JavaScript函数时出现的ReferenceError问题，提供了一套有效的解决方案。通常，直接在HTML标签属性中调用ES模块导出的函数会报错，因为模块作用域限制了函数在全局环境下的访问。本文详细讲解了如何利用`

本教程旨在解决在HTML中直接调用ES模块导出的JavaScript函数时遇到的ReferenceError问题。我们将详细介绍如何利用加载了该模块，模块内部导出的函数（如initPage）也不会自动成为全局可访问的变量。因此，直接在HTML标签属性中（如）尝试调用这些函数，会导致Uncaught ReferenceError: initPage is not defined错误，因为浏览器在全局作用域中找不到名为initPage的函数。

解决方案：内联模块脚本与DOMContentLoaded事件

要解决这个问题，我们需要在HTML中创建一个能够理解ES模块语法的脚本块，并在该块中显式地导入并调用所需函数。同时，为了确保在函数执行时DOM已完全加载并准备好交互，我们应利用DOMContentLoaded事件。

1. JavaScript模块示例

首先，确保你的JavaScript文件正确导出了函数。

// js/script.js
export function initPage() {
  console.log('页面初始化完成！');
  // 这里可以包含任何页面加载时需要执行的逻辑
  // 例如：添加事件监听器、加载数据、操作DOM等
  const body = document.querySelector('body');
  if (body) {
    body.style.backgroundColor = '#f0f8ff'; // 示例：改变背景色
  }
}

export function anotherFunction() {
  console.log('这是另一个导出的函数。');
}

2. HTML实现步骤

在HTML文件中，我们将不再使用标签的onload属性。取而代之的是，在结束标签之前添加一个内联的