在 JavaScript 中,export
是一个关键字,用于将模块中的变量、函数、类等导出,以便其他模块可以导入和使用。export default
和 export
(非默认导出)是两种不同的导出方式,它们在使用场景和语义上有明显的区别。
1. export default
作用
export default
用于导出模块的默认值。每个模块只能有一个默认导出。默认导出可以是一个变量、函数、类或对象。
特点
- 单个默认导出:每个模块只能有一个默认导出。
- 导入时无需指定名称:导入时可以使用任意名称,因为默认导出的名称在导出时已经确定。
使用方法
导出:
// myModule.js
export default function myFunction() {console.log('Hello, world!');
}
导入:
// main.js
import myFunction from './myModule.js';myFunction(); // 输出: Hello, world!
适用场景
- 单个功能模块:当模块只提供一个主要功能(如一个函数、一个类或一个对象)时,使用
export default
。 - 简洁性:默认导出在导入时不需要指定名称,代码更简洁。
2. export
(非默认导出)
作用
export
用于导出模块中的多个值(如变量、函数、类等)。每个模块可以有多个非默认导出。
特点
- 多个导出:每个模块可以有多个非默认导出。
- 导入时需要指定名称:导入时需要使用与导出时相同的名称。
使用方法
导出:
// myModule.js
export function myFunction() {console.log('Hello, world!');
}export const myVariable = 42;export class MyClass {constructor(name) {this.name = name;}
}
导入:
// main.js
import { myFunction, myVariable, MyClass } from './myModule.js';myFunction(); // 输出: Hello, world!
console.log(myVariable); // 输出: 42
const instance = new MyClass('Vue'); // 创建 MyClass 的实例
适用场景
- 多个功能模块:当模块提供多个功能(如多个函数、变量或类)时,使用非默认导出。
- 命名空间:非默认导出允许你在导入时明确指定每个导出的名称,避免命名冲突。
3. export
的含义
export
是 JavaScript 模块系统中的一个关键字,用于将模块中的值导出,以便其他模块可以导入和使用。export
的主要作用是:
- 导出值:将模块中的变量、函数、类等导出。
- 模块化:将代码分割成模块,便于复用和维护。
4. 默认导出与非默认导出的对比
特点 | export default | export (非默认导出) |
---|---|---|
导出数量 | 每个模块只能有一个默认导出 | 每个模块可以有多个非默认导出 |
导入方式 | 导入时可以使用任意名称 | 导入时需要使用与导出时相同的名称 |
适用场景 | 单个功能模块 | 多个功能模块 |
代码简洁性 | 导入时代码更简洁 | 导入时需要明确指定名称,避免冲突 |
5. 使用场景总结
-
export default
:- 适用于模块只提供一个主要功能。
- 导入时不需要指定名称,代码更简洁。
- 适用于单个功能模块,如工具函数、配置对象等。
-
export
(非默认导出):- 适用于模块提供多个功能。
- 导入时需要明确指定名称,避免命名冲突。
- 适用于多个功能模块,如工具库、配置文件等。
6. 总结
export
是 JavaScript 模块系统中的关键字,用于将模块中的值导出。export default
和 export
(非默认导出)是两种不同的导出方式,各有其特点和适用场景。根据模块的功能和需求选择合适的导出方式,可以更好地组织代码,提高代码的可读性和可维护性。