JavaScript模块化：import与export教程

本文深入解析了ES6模块化核心语法import与export的实用规则与最佳实践，涵盖命名导出与默认导出的本质区别、精确匹配与灵活重命名的导入方式、路径必须带扩展名等关键规范，并穿插真实代码示例与常见陷阱（如循环依赖、动态导入场景），帮助开发者构建清晰、可维护、符合现代标准的JavaScript模块结构。

JavaScript模块化开发中，import 和 export 是 ES6（ES2015）引入的核心语法，用于实现代码的封装、复用与依赖管理。它们让每个文件可以明确声明自己提供什么（export），又使用什么（import），从而替代了过去全局变量或立即执行函数（IIFE）等松散组织方式。

export：导出模块内容

一个模块可通过 export 对外暴露变量、函数、类或默认值。有命名导出和默认导出两种主要形式：

• 命名导出（Named Export）：可导出多个，必须用原名导入（或重命名）。支持在声明时直接导出，也支持统一导出。

✅ 示例：

// math.js
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export class Calculator { /* ... */ }
// 或统一导出
// const sub = (a, b) => a - b;
// export { PI, add, sub };

• 默认导出（Default Export）：每个模块最多一个，默认导出不强制命名，导入时可自定义名称，更灵活。

✅ 示例：

// utils.js
export default function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

import：导入其他模块内容

import 必须写在模块顶层（不能在条件或函数内），语法需与导出方式对应：

• 导入命名导出：用大括号 {}，名称必须与导出一致（可使用 as 重命名）。
• 导入默认导出：不加花括号，可任意命名。
• 同时导入默认 + 命名：写成 import 默认名, { 命名1, 命名2 } from '模块路径'。
• 只执行模块而不导入任何值（如加载 polyfill）：import 'module-path';。

✅ 示例：

// app.js
import { PI, add } from './math.js';
import calc from './utils.js'; // 导入默认导出
import debounce, { throttle } from './helpers.js'; // 默认 + 命名
import { PI as MathPI } from './math.js'; // 重命名
import './polyfill.js'; // 仅执行

模块路径与后缀注意事项

ES 模块规范要求 import 路径必须是相对路径（./ 或 ../）或绝对 URL，不能省略扩展名（如 .js），除非运行环境（如某些打包工具或 Node.js 的实验性支持）做了自动解析。

• ✅ 正确：import { foo } from './utils.js';
• ❌ 错误（在原生环境）：import { foo } from './utils';（缺少扩展名）
• ✅ 支持裸模块名（如 lodash）需依赖打包工具（Webpack/Vite）或 Node.js 的 imports 字段配置。

常见组合与实用建议

• 一个模块优先使用默认导出暴露主要功能（如 React 组件、工具函数），辅以命名导出提供辅助方法。
• 避免混合使用默认导出和过多命名导出，保持接口清晰；若导出项较多，考虑拆分成子模块。
• 注意循环依赖：A 导入 B，B 又导入 A —— 模块会得到未完全执行的对象（undefined 风险），应通过重构或延迟导入（import() 动态导入）规避。
• 动态导入 import('./module.js') 返回 Promise，适合按需加载、条件加载或顶级 await 场景（需模块类型为 type="module"）。

理论要掌握，实操不能落！以上关于《JavaScript模块化：import与export教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！