登录
首页 >  文章 >  前端

JavaScript模块导入导出详解

时间：2026-04-13 13:27:40 273浏览 收藏

本文深入解析了JavaScript模块化的核心机制——export与import，系统讲解了命名导出/导入、默认导出/导入、重命名、批量转发及混合导入等关键用法，并强调了路径规范（必须带扩展名或以./开头）、环境配置要点（浏览器需type="module"，Node.js需"type":"module"或.mjs后缀）以及ES6模块的静态特性（不可在条件语句或函数内使用）；同时补充了动态导入import()的异步加载能力，帮助开发者构建清晰、解耦、可维护且无全局污染的现代JavaScript项目结构。

JavaScript模块如何导出_如何导入其他模块？

JavaScript模块通过 export 导出，用 import 导入其他模块。ES6 模块是静态语法，必须写在文件顶层，不能放在条件语句或函数里。

如何导出（export）

导出分两种：命名导出和默认导出，可混用但推荐保持简洁。

  • 命名导出：一个文件可多次使用 export，导出变量、函数、类等，导入时需用对应名称
// math.js
export const PI = 3.14;
export function add(a, b) { return a + b; }
export class Calculator { ... }
  • 默认导出：每个模块最多一个 export default，导入时名字可自定，适合导出主功能
// utils.js
export default function debounce(fn, delay) { ... }
  • 重命名导出 / 批量导出：可用 as 改名，或用 export { ... } from 'path' 转发
export { add as sum, PI as pi } from './math.js';
export { default as debounce } from './utils.js';

如何导入（import）

导入也分命名导入和默认导入，路径必须带扩展名（如 .js）或为相对/绝对路径，不能省略 ./ 开头。

  • 导入命名导出：用大括号，名字必须与导出一致（或用 as 重命名）
import { PI, add } from './math.js';
import { add as sum } from './math.js';
  • 导入默认导出：不加大括号，名字可任意取
import debounce from './utils.js';
import myDebounce from './utils.js'; // 也可以
  • 混合导入：默认 + 命名，顺序不限，但默认必须在前（语法要求）
import debounce, { PI, add } from './utils.js';
  • 只执行模块（无导入）：适用于仅需副作用的脚本（如 polyfill）
import './polyfill.js';

常见注意事项

  • 模块路径是相对于当前文件的，不是 HTML 页面或终端路径
  • 浏览器中使用模块需加 type="module"：
  • Node.js 中启用模块需设置 "type": "module" 在 package.json，或用 .mjs 后缀
  • 动态导入用 import() 函数，返回 Promise，适合按需加载
button.addEventListener('click', async () => {
const { renderChart } = await import('./charts.js');
renderChart();
}); 基本上就这些。导出和导入搭配得当，就能组织好代码结构，避免全局污染，也方便复用和测试。

好了，本文到此结束，带大家了解了《JavaScript模块导入导出详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>