JavaScript 模块化教程：深入理解 export 和 import

JavaScript 模块化教程：深入理解 export 和 import

【免费下载链接】ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info

模块系统是现代 JavaScript 开发中不可或缺的一部分。本文将全面讲解 JavaScript 模块中的导出(export)和导入(import)机制，帮助你掌握模块化的核心概念。

基础导出语法

在 JavaScript 模块中，我们可以使用 export 关键字来导出变量、函数或类。有以下几种基本导出方式：

1. 声明时直接导出

// 导出数组
export let months = ['一月', '二月', '三月', '四月', '五月'];

// 导出常量
export const MODULES_STANDARD_YEAR = 2015;

// 导出类
export class User {
  constructor(name) {
    this.name = name;
  }
}

重要提示：当导出类或函数时，不需要在 export 语句后加分号。这是 JavaScript 语法的一个特殊之处。

2. 先声明后导出

function sayHi(user) {
  console.log(`你好, ${user}!`);
}

function sayBye(user) {
  console.log(`再见, ${user}!`);
}

// 在声明后统一导出
export {sayHi, sayBye};

这种方式更灵活，可以在文件末尾集中管理所有导出项。

导入方式详解

1. 基本导入

import {sayHi, sayBye} from './say.js';

sayHi('张三'); // 输出: 你好, 张三!

2. 整体导入

import * as say from './say.js';

say.sayHi('李四');

虽然这种方式看起来简洁，但有以下缺点：

• 不利于代码优化工具进行"tree-shaking"（移除未使用代码）
• 代码可读性降低
• 需要更长的调用路径（say.sayHi 而不是直接 sayHi）

3. 重命名导入

import {sayHi as hi, sayBye as bye} from './say.js';

hi('王五');

这在避免命名冲突或简化长名称时特别有用。

默认导出

默认导出是模块系统的重要特性，适合模块只导出一个主要功能的情况。

1. 基本用法

// user.js
export default class User {
  constructor(name) {
    this.name = name;
  }
}

导入时不需要花括号：

import User from './user.js';
new User('赵六');

2. 默认导出的特点

• 每个模块只能有一个默认导出
• 导出的内容可以没有名称
• 导入时可以任意命名

3. 默认导出的争议

虽然方便，但默认导出也存在问题：

• 导入时可以随意命名，导致代码一致性难以维护
• 某些工具对默认导出的支持不如命名导出好
• 重构时可能更困难

最佳实践：建议团队统一约定，要么全部使用命名导出，要么对默认导出的导入名称遵循文件命名规范。

高级技巧：重新导出

重新导出(Re-export)允许我们将其他模块的内容导入后立即导出，常用于创建统一的入口文件。

1. 基本重新导出

export {sayHi} from './say.js';

2. 重新导出默认导出

export {default as User} from './user.js';

3. 重新导出的应用场景

假设我们有一个工具库，结构如下：

utils/
    index.js  # 主入口
    string.js # 字符串处理
    math.js   # 数学计算

在 index.js 中可以：

export * from './string.js';
export {default as Calculator} from './math.js';

这样用户只需从 utils/index.js 导入，而不需要关心内部结构。

动态导入

静态的 import 语句必须在模块顶层，如果需要在条件或按需加载，可以使用动态 import()：

if (needModule) {
  const module = await import('./module.js');
  module.doSomething();
}

动态导入返回一个 Promise，因此需要使用 await 或 .then() 来处理。

总结表格

导出类型	语法	导入语法
命名导出	export const/let/function/class	import {name} from 'module'
重命名导出	export {name as newName}	import {newName} from 'module'
默认导出	export default ...	import anyName from 'module'
重新导出	export {...} from 'module'	-

掌握这些模块化技术将显著提升你的 JavaScript 代码组织能力，使项目更易于维护和扩展。

【免费下载链接】ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info