跳至主要內容

模块系统 (Module)

2025/8/24大约 6 分钟

模块系统 (Module)

ES6模块系统是ECMAScript 2015引入的官方模块化规范，它允许我们将代码分割成独立的文件，每个文件作为一个模块，提高代码的可维护性和可复用性。在此之前，JavaScript并没有官方的模块系统，开发者通常使用CommonJS（Node.js）或AMD（浏览器）等第三方规范。

设计目标与核心价值

模块系统的主要设计目标是：

  • 提供一种标准化的方式来组织和封装代码
  • 解决全局作用域污染问题
  • 实现代码的按需加载
  • 支持依赖管理
  • 提高代码的可维护性和可复用性

基本概念与语法

ES6模块系统基于两个核心关键字：export 和 import。

  • export：用于从模块中导出函数、对象或原始值，使其可以被其他模块导入和使用
  • import：用于从其他模块导入已导出的函数、对象或原始值

模块的导出方式

1. 命名导出

命名导出允许我们导出多个值，每个值都有一个唯一的名称。

// module.js
// 导出变量
export const name = '模块名称';
export const version = '1.0.0';

// 导出函数
export function sayHello() {
  console.log('Hello from module');
}

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

也可以先定义，再统一导出：

// module.js
const name = '模块名称';
const version = '1.0.0';

function sayHello() {
  console.log('Hello from module');
}

class ModuleClass {
  constructor() {
    this.name = name;
  }
}

export { name, version, sayHello, ModuleClass };

2. 默认导出

默认导出允许我们为模块指定一个默认值，一个模块只能有一个默认导出。

// module.js
// 默认导出函数
export default function() {
  console.log('This is default export');
}

// 或者先定义，再导出
function defaultFunction() {
  console.log('This is default export');
}

export default defaultFunction;

默认导出也可以是类、对象或原始值：

// 导出类作为默认值
export default class {
  constructor() {
    this.name = 'Default Class';
  }
}

// 导出对象作为默认值
export default {
  name: 'Default Object',
  version: '1.0.0'
};

// 导出原始值作为默认值
export default 'Default Value';

3. 混合导出

一个模块可以同时包含命名导出和默认导出：

// module.js
export const name = '模块名称';
export const version = '1.0.0';

export default function() {
  console.log('This is default export');
}

模块的导入方式

1. 命名导入

命名导入用于导入模块中的命名导出：

// main.js
import { name, version, sayHello, ModuleClass } from './module.js';

console.log(name); // 输出: 模块名称
console.log(version); // 输出: 1.0.0
sayHello(); // 输出: Hello from module
const instance = new ModuleClass();
console.log(instance.name); // 输出: 模块名称

可以使用别名来重命名导入的内容：

import { name as moduleName, version as moduleVersion } from './module.js';

console.log(moduleName); // 输出: 模块名称
console.log(moduleVersion); // 输出: 1.0.0

2. 默认导入

默认导入用于导入模块中的默认导出：

// main.js
import defaultExport from './module.js';

defaultExport(); // 输出: This is default export

默认导入也可以使用别名：

import myDefault from './module.js';

myDefault(); // 输出: This is default export

3. 混合导入

可以同时导入模块中的默认导出和命名导出：

// main.js
import defaultExport, { name, version } from './module.js';

defaultExport(); // 输出: This is default export
console.log(name); // 输出: 模块名称
console.log(version); // 输出: 1.0.0

4. 整体导入

可以使用 * 来导入模块中的所有导出，并将它们放入一个对象中：

// main.js
import * as module from './module.js';

console.log(module.name); // 输出: 模块名称
console.log(module.version); // 输出: 1.0.0
module.sayHello(); // 输出: Hello from module
const instance = new module.ModuleClass();
console.log(instance.name); // 输出: 模块名称

动态导入

ES2020引入了动态导入（Dynamic Import），允许我们在运行时按需导入模块：

// main.js
button.addEventListener('click', async () => {
  const module = await import('./module.js');
  module.sayHello(); // 输出: Hello from module
});

动态导入返回一个Promise，因此可以使用async/await或then/catch来处理。

模块的特性

1. 严格模式

ES6模块自动运行在严格模式下，不需要显式添加 'use strict' 指令。

2. 提升

模块中的导入和导出声明会被提升到模块的顶部，这意味着我们可以在定义之前使用导入的内容。

// main.js
console.log(name); // 不会报错，输出: 模块名称

import { name } from './module.js';

3. 单例模式

每个模块在首次导入时被执行一次，然后被缓存起来。后续的导入会直接使用缓存的结果，而不会重新执行模块代码。

// module.js
console.log('模块被执行');
export const name = '模块名称';

// main1.js
import { name } from './module.js'; // 输出: 模块被执行

// main2.js
import { name } from './module.js'; // 不会再次输出: 模块被执行

4. 循环依赖

ES6模块系统支持循环依赖（两个或多个模块相互导入），但需要注意避免在模块初始化阶段访问未定义的导出。

应用场景

模块系统在以下场景中特别有用：

  1. 代码组织：将大型应用拆分成多个小型、独立的模块
  2. 代码复用：创建可被多个应用共享的库或组件
  3. 按需加载：使用动态导入实现代码的懒加载，提高应用性能
  4. 依赖管理：明确模块之间的依赖关系，避免全局变量污染
  5. 团队协作：多个开发者可以同时开发不同的模块，减少代码冲突

注意事项与最佳实践

  1. 路径规范：导入路径应该使用相对路径（以 ./ 或 ../ 开头）或绝对路径

  2. 文件扩展名：在浏览器环境中，导入路径通常需要包含文件扩展名（如 .js）；在Node.js环境中，使用ESM时也需要包含文件扩展名

  3. 默认导出 vs 命名导出：

    • 对于只导出一个主要功能的模块，使用默认导出
    • 对于导出多个功能的模块，使用命名导出

  4. 避免循环依赖：尽量避免模块之间的循环依赖，如无法避免，确保在运行时而不是初始化时访问依赖

  5. 按需导入：使用动态导入按需加载大型模块，提高应用的初始加载速度

  6. 模块命名：模块名称应该清晰、描述性强，反映模块的功能

与CommonJS的比较

特性ES6模块CommonJS
语法使用 export 和 import使用 module.exports 和 require()
加载方式静态加载（编译时）动态加载（运行时）
严格模式自动启用需手动启用
this 值undefinedmodule.exports
循环依赖支持（通过引用）支持（通过值拷贝）
浏览器支持需转译或现代浏览器不直接支持

总结

ES6模块系统是JavaScript官方的模块化解决方案，它提供了一种标准化的方式来组织和封装代码。通过 export 和 import 关键字，我们可以轻松地导出和导入模块中的功能。模块系统具有严格模式、提升、单例模式等特性，支持动态导入和循环依赖。

与CommonJS等第三方模块规范相比，ES6模块系统具有更简洁的语法和更强大的功能，并且得到了现代浏览器和Node.js的广泛支持。合理使用模块系统可以提高代码的可维护性、可复用性和性能。

默认页脚