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' 只允许一个、导入时不加花括号

如果你是写组件库或者模块工具,推荐使用:

  • 组件:默认导出

  • 工具函数:命名导出(统一导出更整洁)

相关推荐
2501_915106322 小时前
移动端网页调试实战,iOS WebKit Debug Proxy 的应用与替代方案
android·前端·ios·小程序·uni-app·iphone·webkit
柯南二号3 小时前
【大前端】React Native 调用 Android、iOS 原生能力封装
android·前端·react native
睡美人的小仙女1274 小时前
在 Vue 前端(Vue2/Vue3 通用)载入 JSON 格式的动图
前端·javascript·vue.js
yuanyxh4 小时前
React Native 初体验
前端·react native·react.js
大宝贱4 小时前
H5小游戏-超级马里奥
javascript·css·html·h5游戏·超级马里奥
程序视点5 小时前
2025最佳图片无损放大工具推荐:realesrgan-gui评测与下载指南
前端·后端
程序视点6 小时前
2023最新HitPaw免注册版下载:一键去除图片视频水印的终极教程
前端
小只笨笨狗~7 小时前
el-dialog宽度根据内容撑开
前端·vue.js·elementui
weixin_490354347 小时前
Vue设计与实现
前端·javascript·vue.js
GISer_Jing8 小时前
React过渡更新:优化渲染性能的秘密
javascript·react.js·ecmascript