【JS|第21期】JavaScript模块化：深入解析三种文件暴露方式

日期：2024年7月6日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

说在最前面：本文 vue3 的示例代码，在没有另外声名的情况下，均采用 <script setup> 组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^

---

---

---

一、前言

在现代 JavaScript 开发中，模块化已经成为一种不可或缺的实践。它不仅提高了代码的可维护性和可读性，还促进了代码的重用。JavaScript 提供了多种模块化的解决方案，其中最常用的就是 ES6模块系统。在这个系统中，我们可以通过不同的方式来暴露模块内部的 变量 和 函数，以便在其他地方使用。今天，我们将深入探讨JavaScript 中的三种文件暴露方式，并通过实例来理解它们的工作原理。

二、三种文件暴露方式

1、分别暴露（Multiple Exports）：细粒度的控制

首先，我们来了解 分别暴露 （Multiple Exports） 的概念。这种方式允许我们在模块中定义多个export语句，每个语句对应一个需要暴露的变量或函数。这样做的好处是，我们可以非常精确地选择哪些成员对外可见。

让我们看一个简单的例子，假设我们有一个名为 math.js 的模块，它包含了两个数学函数：

// math.js
 export function add(a