对我们的下一本书感兴趣吗？了解更多关于使用 React 构建大型 JavaScript Web 应用程序

设计模式

模块模式

随着应用程序和代码库的增长，保持代码的可维护性和分离变得越来越重要。模块模式允许您将代码拆分为更小的、可重用的部分。

除了能够将代码拆分为更小的可重用部分外，模块还允许您将某些值保持在文件内部。默认情况下，模块内的声明在该模块的范围内（封装）。如果我们没有显式导出某个值，那么该值在该模块外部不可用。这降低了在代码库的其他部分声明的值发生名称冲突的风险，因为这些值在全局范围内不可用。

ES2015 模块

ES2015 引入了内置的 JavaScript 模块。模块是一个包含 JavaScript 代码的文件，与普通脚本的行为略有不同。

让我们来看一个名为 math.js 的模块的示例，它包含数学函数。

math.js
index.js
1function add(x, y) {
2  return x + y;
3}
4function multiply(x) {
5  return x * 2;
6}
7function subtract(x, y) {
8  return x - y;
9}
10function square(x) {
11  return x * x;
12}

我们有一个 math.js 文件，它包含一些简单的数学逻辑。我们有函数允许用户添加、乘以、减去和获取他们传递的值的平方。

但是，我们不仅希望在 math.js 文件中使用这些函数，我们还希望能够在 index.js 文件中引用它们！目前，在 index.js 文件中会抛出一个错误：文件中不存在名为 add、subtract、multiply 或 square 的函数。我们正在尝试引用在 index.js 文件中不可用的函数。

为了使 math.js 中的函数对其他文件可用，我们首先必须导出它们。为了从模块导出代码，我们可以使用 export 关键字。导出函数的一种方法是使用命名导出：我们只需在要公开暴露的部分前面添加 export 关键字即可。在这种情况下，我们希望在每个函数前面添加 export 关键字，因为 index.js 应该可以访问所有四个函数。

math.js
1export function add(x, y) {
2  return x + y;
3}
4

5export function multiply(x) {
6  return x * 2;
7}
8

9export function subtract(x, y) {
10  return x - y;
11}
12

13export function square(x) {
14  return x * x;
15}

我们刚刚使 add、multiply、subtract 和 square 函数可导出！但是，仅仅导出模块中的值不足以使它们对所有文件公开可用。为了能够使用模块中导出的值，您必须在需要引用它们的文件中显式导入它们。

我们必须在 index.js 文件的顶部导入这些值，方法是使用 import 关键字。要让 javascript 知道我们要从哪个模块导入这些函数，我们需要添加一个 from 值和模块的相对路径。

index.js
math.js
1import { add, multiply, subtract, square } from "./math.js";

我们刚刚在 index.js 文件中从 math.js 模块导入四个函数！让我们试一试看看我们现在是否可以使用这些函数！

math.js
index.js
1function add(x, y) {
2  return x + y;
3}
4function multiply(x) {
5  return x * 2;
6}
7function subtract(x, y) {
8  return x - y;
9}
10function square(x) {
11  return x * x;
12}

引用错误消失了，我们现在可以使用模块中导出的值了！

使用模块的一个很大好处是我们只能访问使用 export 关键字显式导出的值。我们没有使用 export 关键字显式导出的值仅在该模块内可用。

让我们创建一个仅在 math.js 文件中可引用的值，名为 privateValue。

math.js
index.js
1const privateValue = "This is a value private to the module!";
2

3export function add(x, y) {
4  return x + y;
5}
6

7export function multiply(x) {
8  return x * 2;
9}
10

11export function subtract(x, y) {
12  return x - y;
13}
14

15export function square(x) {
16  return x * x;
17}

请注意，我们在 privateValue 前面没有添加 export 关键字。因为我们没有导出 privateValue 变量，所以我们无法在 math.js 模块之外访问此值！

index.js
math.js
1import { add, multiply, subtract, square } from "./math.js";
2

3console.log(privateValue);
4/* Error: privateValue is not defined */

通过将该值保持为模块私有，可以降低意外污染全局范围的风险。您不必担心会意外覆盖由使用您的模块的开发人员创建的值，这些值可能与您的私有值具有相同的名称：它可以防止名称冲突。

有时，导出的名称可能会与本地值冲突。

index.js
math.js
1import { add, multiply, subtract, square } from "./math.js";
2

3function add(...args) {
4  return args.reduce((acc, cur) => cur + acc);
5} /* Error: add has  already been declared */
6

7function multiply(...args) {
8  return args.reduce((acc, cur) => cur * acc);
9}
10/* Error: multiply has already been declared */

在这种情况下，我们在 index.js 中有名为 add 和 multiply 的函数。如果我们导入具有相同名称的值，则会导致名称冲突：add 和 multiply 已经声明！幸运的是，我们可以使用 as 关键字重命名导入的值。

让我们将导入的 add 和 multiply 函数重命名为 addValues 和 multiplyValues。

index.js
math.js
1import {
2  add as addValues,
3  multiply as multiplyValues,
4  subtract,
5  square
6} from "./math.js";
7

8function add(...args) {
9  return args.reduce((acc, cur) => cur + acc);
10}
11

12function multiply(...args) {
13  return args.reduce((acc, cur) => cur * acc);
14}
15

16/* From math.js module */
17addValues(7, 8);
18multiplyValues(8, 9);
19subtract(10, 3);
20square(3);
21

22/* From index.js file */
23add(8, 9, 2, 10);
24multiply(8, 9, 2, 10);

除了命名导出（仅使用 export 关键字定义的导出），您还可以使用默认导出。每个模块只能有一个默认导出。

让我们将 add 函数设为默认导出，并将其他函数保留为命名导出。我们可以通过在值前面添加 export default 来导出默认值。

math.js
1export default function add(x, y) {
2  return x + y;
3}
4

5export function multiply(x) {
6  return x * 2;
7}
8

9export function subtract(x, y) {
10  return x - y;
11}
12

13export function square(x) {
14  return x * x;
15}

命名导出和默认导出之间的区别在于从模块导出值的方式，实际上改变了我们必须导入值的方式。

以前，我们必须对命名导出使用方括号：import { module } from 'module'。使用默认导出，我们可以不使用方括号导入值：import module from 'module'。

index.js
math.js
1import add, { multiply, subtract, square } from "./math.js";
2

3add(7, 8);
4multiply(8, 9);
5subtract(10, 3);
6square(3);

从模块导入的值（不使用方括号）始终是默认导出的值，如果存在默认导出的话。

因为 JavaScript 知道此值始终是默认导出的值，所以我们可以给导入的默认值一个与我们导出它的名称不同的名称。例如，我们不需要使用名称 add 导入 add 函数，而可以将其称为 addValues。

index.js
math.js
1import addValues, { multiply, subtract, square } from "./math.js";
2

3addValues(7, 8);
4multiply(8, 9);
5subtract(10, 3);
6square(3);

即使我们导出了名为 add 的函数，我们也可以在导入它时调用它，因为它是我们想要的任何名称，因为 JavaScript 知道您正在导入默认导出。

我们还可以使用星号 * 导入模块中的所有导出，这意味着所有命名导出和默认导出。我们可以通过给要导入模块的名称命名来实现。导入的值等于包含所有导入值的 object。假设我想将整个模块导入为 math。

index.js
math.js
1import * as math from "./math.js";

导入的值是 math object 上的属性。

index.js
math.js
1import * as math from "./math.js";
2

3math.default(7, 8);
4math.multiply(8, 9);
5math.subtract(10, 3);
6math.square(3);

在这种情况下，我们正在导入模块中的所有导出。在执行此操作时要小心，因为您可能会最终不必要地导入值。

使用 * 仅导入所有导出的值。模块私有的值仍然无法在导入模块的文件中使用，除非您显式导出它们。

React

使用 React 构建应用程序时，您经常需要处理大量的组件。与其在一个文件中编写所有这些组件，不如将组件分别放在它们自己的文件中，本质上为每个组件创建一个模块。

我们有一个基本的待办事项列表，包含一个列表、列表项、一个输入字段和一个按钮。

index.js
Button.js
Input.js
TodoList.js
1import React from "react";
2import { render } from "react-dom";
3

4import { TodoList } from "./components/TodoList";
5import "./styles.css";
6

7render(
8  <div className="App">
9    <TodoList />
10  </div>,
11  document.getElementById("root")
12);

我们刚刚将组件拆分为它们自己的文件

  • TodoList.js 用于 List 组件
  • Button.js 用于自定义的 Button 组件
  • Input.js 用于自定义的 Input 组件。

在整个应用程序中，我们不想使用默认的 Button 和 Input 组件，这些组件是从 material-ui 库中导入的。相反，我们希望使用我们自定义版本的组件，方法是向其中添加自定义样式，这些样式定义在它们的文件中的 styles object 中。与其在应用程序中每次都导入默认的 Button 和 Input 组件并不断地向其添加自定义样式，不如现在只需一次导入默认的 Button 和 Input 组件，添加样式，然后导出自定义组件。

index.js
Button.js
Input.js
TodoList.js
1import React from "react";
2import { render } from "react-dom";
3

4import { TodoList } from "./components/TodoList";
5import "./styles.css";
6

7render(
8  <div className="App">
9    <TodoList />
10  </div>,
11  document.getElementById("root")
12);

请注意，我们在 Button.js 和 Input.js 中都有一个名为 style 的 object。因为此值是模块范围的，所以我们可以重复使用变量名而不会产生名称冲突。

动态导入

在文件顶部导入所有模块时，所有模块都在文件其余部分之前加载。在某些情况下，我们只需要根据某个条件导入模块。使用动态导入，我们可以按需导入模块。

import("module").then((module) => {
  module.default();
  module.namedExport();
});

// Or with async/await
(async () => {
  const module = await import("module");
  module.default();
  module.namedExport();
})();

让我们动态导入在上一段中使用的 math.js 示例。

该模块仅在用户单击按钮时加载。

index.js
math.js
1const button = document.getElementById("btn");
2

3button.addEventListener("click", () => {
4  import("./math.js").then((module) => {
5    console.log("Add: ", module.add(1, 2));
6    console.log("Multiply: ", module.multiply(3, 2));
7

8    const button = document.getElementById("btn");
9    button.innerHTML = "Check the console";
10  });
11});
12

13/*************************** */
14/**** Or with async/await ****/
15/*************************** */
16// button.addEventListener("click", async () => {
17//   const module = await import("./math.js");
18//   console.log("Add: ", module.add(1, 2));
19//   console.log("Multiply: ", module.multiply(3, 2));
20// });

通过动态导入模块，我们可以减少页面加载时间。我们只需要加载、解析和编译用户真正需要的代码，而且是在用户需要时才加载。

除了能够按需导入模块外，import() 函数还可以接收表达式。它允许我们传递模板文字，以便根据给定值动态加载模块。

DogImage.js
1import React from "react";
2

3export function DogImage({ num }) {
4  const [src, setSrc] = React.useState("");
5

6  async function loadDogImage() {
7    const res = await import(`../assets/dog${num}.png`);
8    setSrc(res.default);
9  }
10

11  return src ? (
12    <img src={src} alt="Dog" />
13  ) : (
14    <div className="loader">
15      <button onClick={loadDogImage}>Click to load image</button>
16    </div>
17  );
18}

在上面的示例中，只有当用户单击 Click to load dates 按钮时才会导入 date.js 模块。date.js 模块导入第三方 moment 模块，该模块仅在加载 date.js 模块时导入。如果用户不需要显示日期，我们可以完全避免加载此第三方库。

每个图像在用户单击 Click to load image 按钮后加载。这些图像是本地 .png 文件，根据我们传递给字符串的 num 值加载。

const res = await import(`../assets/dog${num}.png`);

这样，我们就不会依赖于硬编码的模块路径。它为根据用户输入、从外部来源接收的数据、函数的结果等动态导入模块的方式增加了灵活性。

使用模块模式，我们可以封装不应该公开的代码部分。这可以防止意外的名称冲突和全局作用域污染，从而降低使用多个依赖项和命名空间的风险。为了能够在所有 JavaScript 运行时使用 ES2015 模块，需要使用像 Babel 这样的转译器。