JavaScript JavaScript 模块

我们正在处理一篇关于JavaScript模块的文章。文章内容非常详细，涵盖了模块的背景、基本示例、导出和导入、导入映射、非JavaScript资源、模块与HTML的区别、默认导出与具名导出、避免命名冲突、重命名导入与导出、创建模块对象、模块与类、合并模块、动态加载模块、顶层await、导入声明提升、循环导入、同构模块以及故障排除等主题。 文章结构清晰，每个部分都有小标题，并且包含代码示例和说明。 我们的任务是生成一个关于JavaScript模块的摘要，要求： 1. 摘要应该涵盖文章的主要部分。 2. 摘要应该简洁，但包含足够的信息，让读者了解JavaScript模块的核心概念和用法。 3. 摘要应该按照文章的逻辑顺序组织。 根据文章内容，我们可以将摘要分为以下几个部分： - 模块化的背景 - 基本示例和文件结构 - 导出模块的功能 - 导入功能到脚本 - 使用导入映射 - 加载非JavaScript资源 - 将模块应用到HTML - 模块与经典脚本的区别 - 默认导出与具名导出 - 避免命名冲突（重命名导入与导出、创建模块对象） - 模块与类 - 合并模块 - 动态加载模块 - 顶层await - 导入声明提升 - 循环导入 - 同构模块 - 故障排除 我们将按照这个顺序来写摘要，每个部分用一两句话概括。 注意：摘要中不需要包含代码示例，但需要提及关键概念。 ### JavaScript 模块摘要 #### 模块化背景 JavaScript 模块化解决了复杂项目的代码组织问题，允许将功能拆分为可按需导入的独立文件。现代浏览器原生支持模块，无需转译，提升了加载效率和代码可维护性。 #### 基本结构 模块文件通常以 `.js` 扩展名存储（如 `square.js`），通过 `export` 导出功能（函数、变量、类），并通过 `import` 在其他脚本中导入。例如： ```js // square.js export const name = "square"; export function draw(ctx, length, x, y, color) { ... } // main.js import { name, draw } from "./modules/square.js"; ``` #### 核心特性 1. **导入映射** 使用 `