ES6 Module 语法全解析：命名导出、默认导出、动态导入及模块特性

ES6（ECMAScript 2015）引入了模块系统，旨在增强 JavaScript 的模块化、可维护性及代码复用能力。ES6 模块支持跨文件组织与管理代码，使模块间依赖关系更为清晰。

1. 导出（Export）

1.1 命名导出（Named Exports）

命名导出支持输出多个变量、函数或类，且每个导出标识符必须唯一。

// file1.js
export const name = 'John';
export function greet() {
  console.log('Hello!');
}
export class Person {
  constructor(name) {
    this.name = name;
  }
}

通过命名导出时，导入方可使用相同的标识名来引用这些导出内容。

// file2.js
import { name, greet, Person } from './file1';
console.log(name); // John
greet();           // Hello!
const person = new Person('Jane');

1.2 默认导出（Default Export）

单个模块仅允许存在一个默认导出。其语法更为简洁，可用于输出单一值（如对象、函数或类）。

// file1.js
const person = {
  name: 'John',
  age: 30
};
export default person;

导入默认导出时不使用花括号包裹。

// file2.js
import person from './file1';
console.log(person.name); // John

1.3 导出重命名（Export Rename）

在导出过程中，可利用 as 关键字对导出标识进行重命名。

// file1.js
const firstName = 'John';
export { firstName as name };

1.4 导出合并（Export All）

可将一个模块的所有现有导出重新导出，适用于模块间的组合与聚合场景。

// file1.js
export const name = 'John';
// file2.js
export * from './file1'; // 导出 file1.js 中所有的导出

2. 导入（Import）

2.1 导入命名导出（Named Imports）

// file1.js
export const name = 'John';
export function greet() {
  console.log('Hello!');
}
// file2.js
import { name, greet } from './file1';
console.log(name);  // John
greet();            // Hello!

2.2 导入默认导出（Default Import）

// file1.js
const person = { name: 'John' };
export default person;
// file2.js
import person from './file1';
console.log(person.name); // John

2.3 导入重命名（Import Rename）

导入时可使用 as 关键字对引入的模块标识进行重命名。

// file1.js
export const firstName = 'John';
// file2.js
import { firstName as name } from './file1';
console.log(name); // John

2.4 导入全部（Import All）

可一次性导入模块的所有命名导出，并将其封装为一个对象使用。

// file1.js
export const name = 'John';
export const age = 30;
// file2.js
import * as person from './file1';
console.log(person.name); // John
console.log(person.age);  // 30

2.5 动态导入（Dynamic Import）

ES6 模块支持动态导入机制，该操作返回 Promise 对象，允许按需异步加载模块。

// 动态导入
import('./file1').then(module => {
  console.log(module.name);
});

3. 模块化的特点

3.1 模块是默认严格模式

ES6 模块内部默认启用严格模式（‘use strict’;），所有模块代码均受严格模式约束，无需显式声明。

// file1.js
x = 10; // 报错，严格模式下不允许未声明的变量

3.2 模块的作用域

每个模块拥有独立作用域，避免污染全局环境。模块间通过 import 和 export 机制进行交互。

// file1.js
let counter = 0;
export function increment() {
  counter++;
}
// file2.js
import { increment } from './file1';
increment();
console.log(counter); // 由于作用域隔离，counter 在 file2.js 中不可访问

3.3 循环依赖

ES6 模块系统有效处理了模块间的循环依赖。对于已导入的模块，系统会将其暂时置于“挂起”状态，直至依赖模块加载完毕。

// a.js
import { b } from './b.js';
export const a = 'a';
// b.js
import { a } from './a.js';
export const b = 'b';
console.log(a, b); // 输出: a b

3.4 只读导入

ES6 模块中的导入值为只读状态，禁止修改从其他模块导入的值。

// file1.js
export let name = 'John';
// file2.js
import { name } from './file1';
name = 'Jane'; // 错误：不能修改从模块导入的值

4. 使用模块

4.1 模块在浏览器中的使用

现代浏览器支持 type 为 module 的脚本标签。使用

<script type="module">
  import { name } from './file1.js';
  console.log(name);
</script>

4.2 在 Node.js 中使用 ES6 模块

在 Node.js 环境中，需使用 .mjs 文件扩展名或在 package.json 中配置 “type”: “module” 以启用 ES6 模块支持。

{
  "type": "module"
}

随后，即可在 Node.js 中应用 import 和 export 语法。

// file1.mjs
export const name = 'John';
// file2.mjs
import { name } from './file1.mjs';
console.log(name); // John

5. 总结

ES6 模块提供了更简洁的语法，使 JavaScript 代码结构更清晰且易于维护。借助 import 和 export，可将代码拆分为独立模块，实现按需加载及依赖管理。使用 ES6 模块化的优势包括：

提升代码的可维护性与可读性。更好地支持循环依赖处理。默认启用严格模式，规避常见 JavaScript 问题。

到此这篇关于深入浅析es6-module的语法的文章就介绍到这了,更多相关es6-module语法内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

ES6 Module 模块化语法详解：导出、导入与特性