随着前端应用的复杂性不断增加，模块化已经成为了每个前端开发者必须掌握的技能之一。ES6 给开发者提供了一种强大的模块化方案，即 import 和 export 关键字，可以很方便地将代码拆分为模块并组织起来。但是，当我们使用模块化开发时，还需要将我们的 API 接口暴露出去供其他模块调用。本文将为你介绍如何在 ES6 模块化中对外提供 API 接口。
模块化基础
在介绍如何对外提供 API 接口之前，我们需要先了解 ES6 模块化的基础知识。在 ES6 模块系统中，我们可以使用 export 关键字将变量、函数、类等实体导出为模块的公共 API，任何导入该模块的代码均可使用这些公共 API。我们可以将导出的 API 命名导出或默认导出。命名导出允许我们以任意名称导出实体，而默认导出则无需使用名称即可导出实体。
// 将变量、函数、类等实体命名导出
export const foo = 'foo';
export function bar() {}
export class Baz {}
// 将默认实体导出
export default function() {}使用 import 关键字可以导入一个模块中的 API 并使用它们。当模块接口控制权从模块导出方转交给模块导入方时，模块接口就可以被使用。
// 导入命名导出实体
import { foo, bar, Baz } from './module';
// 导入默认导出实体
import someFunc from './module';对外提供 API 接口
在写模块化代码时，我们需要将 API 接口暴露出去，以便其他模块调用。但是，我们不希望模块使用者直接访问模块中的实现细节，而是通过暴露的 API 接口来使用模块。因此，我们需要思考如何设计暴露接口。
命名导出
命名导出可以让我们以任意名称导出实体，并在导入时以同样的名称引用它们。这样的好处是，当我们需要更改实现细节时，不需要更改我们导出的名称，从而使我们的 API 接口变得更加稳定。
-- -------------------- ---- ------- -- ------- -- ---- ------ ----- --- - --- -- -- - - -- ------ ----- -------- - --- -- -- - - -- -- ------ -- ------ ------ - ---- -------- - ---- --------- ----- ------ - ------ --- -- - ----- ------------- - ----------- --- -- --
默认导出
默认导出可以让我们以任意名称导出一个默认实体，并在导入时不用加括号引用它，而是直接使用其名称。
-- -------------------- ---- -------
-- -------- -- ----
------ ------- -
-------------- -
-- ---
--
-------------- -
-- ---
-
--
-- ------ -- ------
------ ----- ---- ----------
----- ------- - ----------------------------------
----- ------- - ----------------------------Mix 导出
当我们需要导出多个实体时，我们也可以使用 Mix 导出，即将多个实体组合成一个对象，然后一起导出。此时，我们可以将命名导出和默认导出混合使用，以提供更明确和可读的 API 接口。
-- -------------------- ---- ------- -- ------ -- --- -- ------ - -------- ---------- - ---- --------- ------ - --------- ------- - ---- --------- ------ ------- - -------- ----------- --------- ------- -- -- ------ -- -- --- -- ------ --- ---- -------- --------------- ----------------- - ----- ----- --- --------------- ------------- ------ ---- ------ -------- ----- ---
总结
使用 ES6 模块化，我们可以很方便地将代码拆分为模块并组织起来。在模块化开发过程中，我们需要将我们的 API 接口暴露出去供其他模块调用。本文介绍了命名导出、默认导出和 Mix 导出三种方式来对外提供 API 接口，并提供了相应的示例代码，希望本文能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659ff4b4add4f0e0ff86ade4