JavaScript模块化以export/import为核心，ES6模块（ESM）为原生标准，支持命名导出、默认导出及混合使用；导入需在顶层，路径须明确，模块单例且按依赖顺序执行。
JavaScript模块化编程的核心是用 export 暴露功能，用 import 引入依赖，ES6模块（ESM）是原生标准，语法简洁、静态分析、支持树摇，比CommonJS更适配现代前端工程。
ES6模块的导出方式
一个模块可以按需导出变量、函数、类或默认成员：
- 命名导出（Named Export）：可导出多个，导入时必须用对应名称，支持重命名
export const PI = 3.14;<br>export function add(a, b) { return a + b; }<br>export class Calculator { ... }- 默认导出（Default Export）：每个模块最多一个，导入时名称可自定义，更灵活
export default function multiply(a, b) { return a * b; }- 也可混合使用：命名导出 + 一个默认导出
ES6模块的导入方式
导入必须在顶层作用域（不能在条件或函数内），且路径需为字符串字面量：
根据ui图生成前端页面
下载
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
-
导入全部命名成员：
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 默认省略后缀；模块是单例，多次导入同一模块只执行一次，且按依赖图顺序执行（从入口开始深度优先）。
立即学习“Java免费学习笔记（深入）”；
- 浏览器中需在
<script type="module">中使用 - 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不会挂到全局，作用域严格受限
