javascript模块语法核心是export导出、import导入,需script type="module",import须在顶层;命名导出/导入用于多个值,默认导出仅一个主功能,可批量导入为命名空间对象,路径需带.js扩展名。

JavaScript 的模块导入导出语法核心就两条规则:用 export 暴露内容,用 import 获取内容。前提是脚本必须是模块(<script type="module"></script>),且 import 只能写在文件最顶部。
命名导出与具名导入
适合导出多个值,比如工具函数、配置常量、类等。每个导出项都有明确名称,导入时也必须用对应名字。
- 导出方式灵活:可逐个声明导出(
export const a = 1;),也可集中导出(export { a, b, myFunc };) - 支持重命名导出:
export { PI as circlePi }; - 导入时需严格匹配名称:
import { a, myFunc } from './utils.js'; - 也可用
as重命名导入:import { myFunc as calc } from './utils.js';
默认导出与默认导入
每个模块只能有一个默认导出,通常用于模块的主功能(如一个类、一个工厂函数或一个对象)。导入时名字可以任意起,更自由。
- 导出:
export default function() { ... }或export default class {}或export default { key: 'value' }; - 导入:
import anything from './main.js';(名字随意) - 也可和命名导出一起用:
import mainModule, { helper } from './main.js';
批量导入与命名空间导入
当不确定要用哪些导出项,或想统一管理所有内容时可用。
- 导入全部命名导出为一个对象:
import * as utils from './utils.js';→ 调用utils.add()、utils.PI - 注意:默认导出会作为该对象的
default属性:utils.default - 不推荐在生产环境滥用,影响 tree-shaking(代码自动剔除未使用部分)
路径与加载注意事项
模块路径是相对的,且浏览器中必须带扩展名(如 ./utils.js),不能省略 .js。
- HTML 中启用模块:
<script type="module" src="main.js"></script> - 模块脚本默认启用严格模式,无需手动加
"use strict"; -
import和export不能出现在条件语句或函数内,只允许在顶层作用域 - 模块执行一次,多次导入同一模块不会重复执行(自动缓存)
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











