【JS|第21期】JavaScript模块化：深入解析三种文件暴露方式
日期：2024年7月6日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01365 = 37.7834；0.99365 = 0.0255
1.02365 = 1377.4083；0.98365 = 0.0006
说在最前面：本文
vue3的示例代码，在没有另外声名的情况下，均采用<script setup>组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^
文章目录
- 一、前言
- 二、三种文件暴露方式
- 1、分别暴露（Multiple Exports）：细粒度的控制
- 2、统一暴露 （Single Export Object）：打包你的API
- 3、默认暴露（Default Export）：单一职责原则
- 三、结语
一、前言
在现代 JavaScript 开发中，模块化已经成为一种不可或缺的实践。它不仅提高了代码的可维护性和可读性，还促进了代码的重用。JavaScript 提供了多种模块化的解决方案，其中最常用的就是 ES6模块系统。在这个系统中，我们可以通过不同的方式来暴露模块内部的 变量 和 函数，以便在其他地方使用。今天，我们将深入探讨JavaScript 中的三种文件暴露方式，并通过实例来理解它们的工作原理。
二、三种文件暴露方式
1、分别暴露（Multiple Exports）：细粒度的控制
首先，我们来了解 分别暴露 （Multiple Exports） 的概念。这种方式允许我们在模块中定义多个export语句，每个语句对应一个需要暴露的变量或函数。这样做的好处是，我们可以非常精确地选择哪些成员对外可见。
让我们看一个简单的例子，假设我们有一个名为 math.js 的模块，它包含了两个数学函数：
// math.jsexport function add(a