17370845950

JavaScript模块化以export/import为核心，ES6模块（ESM）为原生标准，支持命名导出、默认导出及混合使用；导入需在顶层，路径须明确，模块单例且按依赖顺序执行。

JavaScript模块化编程的核心是用 export 暴露功能，用 import 引入依赖，ES6模块（ESM）是原生标准，语法简洁、静态分析、支持树摇，比CommonJS更适配现代前端工程。

ES6模块的导出方式

一个模块可以按需导出变量、函数、类或默认成员：

• 命名导出（Named Export）：可导出多个，导入时必须用对应名称，支持重命名

export const PI = 3.14;
export function add(a, b) { return a + b; }
export class Calculator { ... }

• 默认导出（Default Export）：每个模块最多一个，导入时名称可自定义，更灵活

export default function multiply(a, b) { return a * b; }

• 也可混合使用：命名导出 + 一个默认导出

ES6模块的导入方式

导入必须在顶层作用域（不能在条件或函数内），且路径需为字符串字面量：

• 导入全部命名成员：import * as math from './math.js' → 用 math.PI、math.add
• 解构式导入命名成员：import { PI, add } from './math.js' → 直接用 PI、add
• 重命名导入：import { add as sum } from './math.js' → 使用 sum(2, 3)
• 导入默认成员：import multiply from './math.js'（注意无大括号）
• 同时导入默认 + 命名：import multiply, { PI } from './math.js'

模块路径与执行特性

ES6模块路径必须带扩展名（如 .js）或以 /、./、../ 开头，不支持 Node 默认省略后缀；模块是单例，多次导入同一模块只执行一次，且按依赖图顺序执行（从入口开始深度优先）。

• 浏览器中需在 中使用
• Node.js 需文件后缀为 .mjs 或 package.json 中设置 "type": "module"
• 不支持运行时动态路径（import(expr) 是动态导入，返回 Promise，属进阶用法）

常见问题与注意事项

避免循环依赖：A 导入 B，B 又导入 A，可能导致部分值为 undefined；尽量拆分逻辑或用函数封装访问；另外，ESM 中 this 在模块顶层为 undefined，不是全局对象。

• 命名导出必须用确定的标识符，不能直接 export const obj = {a: 1} 后再改 obj.a = 2——导出的是绑定，不是拷贝
• 默认导出本质是名为 default 的命名导出，import foo from 'x' 等价于 import { default as foo } from 'x'
• 模块内顶层 var、function、class 不会挂到全局，作用域严格受限