ES6 模块化如何对外提供 API 接口

随着前端应用的复杂性不断增加，模块化已经成为了每个前端开发者必须掌握的技能之一。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 接口变得更加稳定。

// math.js -> 命名导出
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// app.js -> 导入命名导出
import { add, subtract } from './math';

const result = add(1, 2); // 3
const anotherResult = subtract(3, 5); // -2

默认导出

默认导出可以让我们以任意名称导出一个默认实体，并在导入时不用加括号引用它，而是直接使用其名称。

// utils.js -> 默认导出
export default {
  isEmail(email) {
    // ...
  },
  isPhone(phone) {
    // ...
  }
};

// app.js -> 导入默认导出
import utils from './utils';

const isEmail = utils.isEmail('example@mail.com');
const isPhone = utils.isPhone('1234567890');

Mix 导出

当我们需要导出多个实体时，我们也可以使用 Mix 导出，即将多个实体组合成一个对象，然后一起导出。此时，我们可以将命名导出和默认导出混合使用，以提供更明确和可读的 API 接口。

// api.js -> Mix 导出
import { getUser, updateUser } from './user';
import { getPosts, addPost } from './post';

export default {
  getUser,
  updateUser,
  getPosts,
  addPost
};

// app.js -> 导入 Mix 导出
import api from './api';

api.getUser(1);
api.updateUser(1, { name: 'Tom' });
api.getPosts();
api.addPost({ title: 'New post', content: '...' });

总结

使用 ES6 模块化，我们可以很方便地将代码拆分为模块并组织起来。在模块化开发过程中，我们需要将我们的 API 接口暴露出去供其他模块调用。本文介绍了命名导出、默认导出和 Mix 导出三种方式来对外提供 API 接口，并提供了相应的示例代码，希望本文能对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659ff4b4add4f0e0ff86ade4