1.默认导出
优点:
- 简洁的导入语法: 导入时不需要使用花括号,可以直接重命名。
- 单一职责: 模块导出一个主要功能或对象时,默认导出更符合逻辑。
适用场景:
- 模块只有一个导出: 如一个组件、一个类或一个函数。
- 使用频繁的库: 比如 React 组件和 Vue 组件通常使用默认导出。
示例:
// utils.js
export default function calculateSum(a, b) {return a + b;
}// usage.js
import calculateSum from './utils';
console.log(calculateSum(2, 3)); // 输出 5
2.命名导出
优点:
- 明确的命名: 在导入时明确知道导入的是什么。
- 多个导出: 允许从同一个模块中导出多个函数、对象或变量。
- 避免命名冲突: 在导入时可以使用
as
进行重命名,避免冲突。
适用场景:
- 模块有多个导出: 比如一个工具函数库。
- 公共常量或类型: 例如导出多个相关的常量或类型定义。
示例:
// utils.js
export function calculateSum(a, b) {return a + b;
}export function calculateDifference(a, b) {return a - b;
}// usage.js
import { calculateSum, calculateDifference } from './utils';
console.log(calculateSum(2, 3)); // 输出 5
console.log(calculateDifference(5, 2)); // 输出 3
3.综合使用
在实际项目中,可以结合使用默认导出和命名导出,以便利用两者的优势。例如,一个模块可以有一个默认导出和多个命名导出:
示例:
// mathUtils.js
export default function calculateSum(a, b) {return a + b;
}export function calculateDifference(a, b) {return a - b;
}export const PI = 3.14;
使用:
// usage.js
import calculateSum, { calculateDifference, PI } from './mathUtils';
console.log(calculateSum(2, 3)); // 输出 5
console.log(calculateDifference(5, 2)); // 输出 3
console.log(PI); // 输出 3.14
总结
- 默认导出: 适用于模块只有一个主要功能或对象时,导入语法简洁。
- 命名导出: 适用于模块有多个导出时,提供明确的导入名称和灵活性。
- 默认导出只能有一个