JavaScript中的命名导出(暴露)
在 JavaScript / React 中，“分别暴露”和“统一暴露”是两种常用的模块导出方式。下面我来清晰地解释它们的区别，并给出示例：
✅ 一、分别暴露（命名导出）
每个变量或函数分别用
export导出。
📦 示例：
// utils.js
export const sum = (a, b) => a + b;
export const multiply = (a, b) => a * b;
✅ 导入方式：
import { sum, multiply } from './utils';
✅ 特点：
-
可以只导入其中一部分：
import { sum } from './utils'; -
必须使用原名称导入，除非使用
as重命名：import { sum as add } from './utils';
✅ 二、统一暴露（也是命名导出）
先定义，再统一用
export {}导出。
📦 示例：
// utils.js
const sum = (a, b) => a + b;
const multiply = (a, b) => a * b;export { sum, multiply };
✅ 导入方式：
import { sum, multiply } from './utils';
✅ 特点：
-
功能和“分别暴露”一样，只是语法结构不同。
-
统一书写更方便管理导出列表。
✅ 三、默认暴露（default export）
每个模块只能有一个
export default
📦 示例：
// MyComponent.jsx
export default function MyComponent() {return <div>Hello</div>;
}
✅ 导入方式：
import MyComponent from './MyComponent';
✅ 特点：
-
导入时可以使用任意名称（默认导出不需要花括号）：
import Anything from './MyComponent'; // 合法
✅ 四、混合使用（不推荐）
// utils.js
export const sum = () => {};
export default function main() {}
可以这样导入：
import main, { sum } from './utils';
👉 尽量避免这样写，容易引起混淆。
✅ 总结表格：
| 类型 | 写法示例 | 导入方式 | 特点 |
|---|---|---|---|
| 分别暴露 | export const a = 1; | import { a } from './x' | 可多次写、导入时必须加花括号 |
| 统一暴露 | export { a, b }; | import { a } from './x' | 统一管理、导入规则同分别暴露 |
| 默认暴露 | export default function() {} | import x from './x' | 只允许一个、导入时不加花括号 |
如果你是写组件库或者模块工具，推荐使用：
-
组件：默认导出
-
工具函数：命名导出（统一导出更整洁）