JavaScript模块是ES6起原生支持的代码组织方式，通过export导出（命名/默认）和import导入实现作用域隔离与复用，需配合type="module"或.mjs后缀使用，且import/export仅限顶层。
JavaScript模块是将代码组织成独立、可复用单元的方式，每个模块拥有自己的作用域，不会污染全局命名空间。从ES6（ECMAScript 2015）开始，原生支持import和export语法，成为现代前端开发的标准实践。
模块的基本导出方式
一个模块通过export向外提供变量、函数、类或对象。可以使用命名导出（named export）或默认导出（default export）：
-
命名导出：可导出多个值，导入时必须使用对应名称
✅ 正确写法：export const PI = 3.14159;export function add(a, b) { return a + b; }export class Calculator { ... } -
默认导出：每个模块最多一个，默认导出不需要名称，导入时可自定义名称
✅ 正确写法：export default function greet(name) { return `Hello, ${name}`; }
或export default class App { ... }
模块的导入方式
使用import语句加载其他模块的功能，导入语法需与导出方式匹配：
-
导入命名导出：用大括号指定名称
import { PI, add, Calculator } from './math.js';
也可重命名：import { add as sum } from './math.js'; -
导入默认导出：不加花括号，名称可任意取
import greet from './greeting.js';
（注意：这里greet不是固定名，可写成import hello from './greeting.js'） -
同时导入默认和命名导出：
import greet, { PI, add } from './utils.js'; -
整体导入（namespace import）：把所有导出挂载到一个对象上
import * as utils from './utils.js';
使用：utils.PI、utils.add(2, 3)
模块使用的注意事项
模块系统依赖严格的语法和环境支持：
立即学习“Java免费学习笔记（深入）”；
- 文件必须以
.mjs后缀命名，或在<script></script>标签中声明type="module"，否则浏览器会按传统脚本执行，不识别import/export - 模块路径必须是相对路径（如
'./file.js'）或绝对URL；不能省略扩展名或使用纯模块名（如'lodash'需构建工具支持） - 模块代码自动运行在严格模式下，无需
"use strict" -
import和export只能出现在模块顶层，不能放在if、函数或块级作用域中（动态导入可用import()函数实现）
常见问题与替代方案
开发中可能遇到模块未生效、报错“Cannot use import statement outside a module”等问题：
- 确保HTML中引入JS时加
type="module"：<script type="module" src="main.js"></script> - Node.js中启用ES模块：在
package.json中添加"type": "module"，或使用.mjs后缀 - 旧项目仍用CommonJS（
require/module.exports）？可通过打包工具（如Webpack、Vite）混合处理，但建议新项目统一用ESM
