JavaScript模块是ES6引入的代码拆分机制,支持import/export语法实现静态依赖管理与作用域隔离,具备严格模式、无全局污染、tree-shaking优化等特性。

JavaScript模块是一套将代码拆分为独立、可复用单元的机制,每个模块拥有自己的作用域,不会污染全局环境。从ES6(ECMAScript 2015)开始,原生支持import和export语法,让依赖管理和代码组织更清晰、可靠。
模块的基本特征
模块文件默认处于严格模式,顶层this为undefined;变量、函数、类等不会自动挂到window上;模块之间通过显式导入导出建立联系,形成静态依赖图,支持构建工具做摇树优化(tree-shaking)。
用export暴露功能
一个模块可通过export向外提供变量、函数、类或默认导出项:
-
命名导出(Named Export):可多次使用,导出时需带名字,导入时名字必须一致(或用别名)
— 示例:export const PI = 3.14;、export function add(a, b) { return a + b; } -
默认导出(Default Export):每个模块最多一个,导入时可自定义名称,更灵活
— 示例:export default class Calculator { ... }或export default function() { ... } -
批量导出与重命名:
export { foo as bar, baz };可在导出时改名;export * from './math.js';可转发其他模块的命名导出(不包括默认)
用import引入依赖
import语句必须位于模块顶层(不能在条件或函数内),且路径必须是字符串字面量(不能拼接):
立即学习“Java免费学习笔记(深入)”;
-
导入命名导出:
import { PI, add } from './utils.js';;若名字冲突可用别名:import { add as sum } from './utils.js'; -
导入默认导出:
import Calculator from './calculator.js';(注意无大括号) -
同时导入默认和命名:
import Calculator, { PI, add } from './utils.js'; -
只执行模块(不取值):
import './polyfill.js';,适用于仅需副作用(如注册全局方法、修改原型)的场景
实际使用注意事项
浏览器中启用模块需在标签加type="module"属性,此时脚本自动按模块方式解析(支持import/export,且默认延迟执行、CORS校验);Node.js从v12起支持ES模块,需用.mjs扩展名或在package.json中设置"type": "module"。











