设计模式 - 模块模式

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

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

ES2015 Modules

ES2015 引入了内置的 JavaScript 模块。模块是包含 JavaScript 代码的文件，与普通脚本相比，其行为存在一些差异。让我们看一个名为 math.js 的模块示例，其中包含数学函数。

// index.js

function add(x, y) {
  return x + y;
}
function multiply(x) {
  return x * 2;
}
function subtract(x, y) {
  return x - y;
}
function square(x) {
  return x * x;
}

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

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

为了使math.js中的函数可用于其他文件，我们首先必须导出它们。为了从模块中导出代码，我们可以使用 export 关键字。导出函数的一种方法是使用命名导出：我们可以简单地在要公开的部分前面添加export关键字。在本例中，我们需要在每个函数前面添加 export 关键字，index.js 应该可以访问所有四个函数。

// math.js

export function add(x, y) {
  return x + y;
}

export function multiply(x) {
  return x * 2;
}

export function subtract(x, y) {
  return x - y;
}

export function square(x) {
  return x * x;
}

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

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

// index.js

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

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

// math.js

function add(x, y) {
  return x + y;
}
function multiply(x) {
  return x * 2;
}
function subtract(x, y) {
  return x - y;
}
function square(x) {
  return x * x;
}

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

拥有模块的一大好处是，我们只能访问使用 export 关键字显式导出的值。我们未使用 export 关键字显式导出的值仅在该模块中可用。

让我们创建一个只能在 math.js 文件中引用的值，称为 privateValue。

// math.js

const privateValue = "This is a value private to the module!";

export function add(x, y) {
  return x + y;
}

export function multiply(x) {
  return x * 2;
}

export function subtract(x, y) {
  return x - y;
}

export function square(x) {
  return x * x;
}

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

// index.js

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

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

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

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

// index.js

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

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

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

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

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

// index.js

import {
  add as addValues,
  multiply as multiplyValues,
  subtract,
  square
} from "./math.js";

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

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

/* From math.js module */
addValues(7, 8);
multiplyValues(8, 9);
subtract(10, 3);
square(3);

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

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

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

// math.js

export default function add(x, y) {
  return x + y;
}

export function multiply(x) {
  return x * 2;
}

export function subtract(x, y) {
  return x - y;
}

export function square(x) {
  return x * x;
}

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

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

// index.js

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

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

如果有可用的默认导出，则从不带括号的模块导入的值始终是默认导出的值。

由于 JavaScript 知道此值始终是默认导出的值，因此我们可以为导入的默认值提供另一个名称，而不是我们导出它的名称。例如，我们可以将其称为 addValues，而不是使用名称 add 导入 add 函数。

// index.js

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

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

即使我们导出了名为 add 的函数，我们也可以导入它，并称它为任何我们喜欢的东西，因为 JavaScript 知道您正在导入默认导出。

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

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

导入的值是 math 对象的属性。

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

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

在本例中，我们将从模块导入所有导出。执行此操作时要小心，因为最终可能会不必要地导入值。

使用 * 仅导入所有导出的值。模块专用值在导入模块的文件中仍然不可用，除非显式导出它们。

React

使用 React 构建应用程序时，您经常需要处理大量组件。我们可以将组件分离到它们自己的文件中，而不是将所有这些组件写入一个文件中，实质上是为每个组件创建一个模块。

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

// index.js

import React from "react";
import { render } from "react-dom";

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

render(
  <div className="App">
    <TodoList />
  </div>,
  document.getElementById("root")
);



// Button.js

import React from "react";
import Button from "@material-ui/core/Button";

const style = {
  root: {
    borderRadius: 3,
    border: 0,
    color: "white",
    margin: "0 20px"
  },
  primary: {
    background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)"
  },
  secondary: {
    background: "linear-gradient(45deg, #2196f3 30%, #21cbf3 90%)"
  }
};

export default function CustomButton(props) {
  return (
    <Button {...props} style={{ ...style.root, ...style[props.color] }}>
      {props.children}
    </Button>
  );
}



// Input.js

import React from "react";
import Input from "@material-ui/core/Input";

const style = {
  root: { padding: "5px", backgroundColor: "#434343", color: "#fff" }
};

export default function CustomInput(props, { variant = "standard" }) {
  return (
    <Input
      style={style.root}
      {...props}
      variant={variant}
      placeholder="Type..."
    />
  );
}


// TodoList

import React, { useState } from "react";
import { List, ListItem, ListItemText } from "@material-ui/core";

import Input from "./Input";
import Button from "./Button";

function InputRow({ addTodoItem }) {
  const [input, setInput] = useState("");

  function addTodo() {
    addTodoItem(input);
    setInput("");
  }

  return (
    <form>
      <Input value={input} onChange={(e) => setInput(e.target.value)} />
      <Button onClick={addTodo} color="primary" variant="outlined">
        Add Item
      </Button>
    </form>
  );
}

export function TodoList() {
  const [todos, setTodos] = useState(["Improve JS skills 💪", "Pet dog 🐶"]);

  function addTodoItem(todo) {
    todo.length && setTodos([...todos, todo]);
  }

  function removeTodoItem(i) {
    todos.splice(i, 1);
    setTodos([...todos]);
  }

  return (
    <div className="todo-list">
      <h1>Todo Items</h1>
      <InputRow addTodoItem={addTodoItem} />
      <List>
        {todos.map((todo, i) => (
          <ListItem key={`${todo}-${i}`}>
            <ListItemText>{todo}</ListItemText>
            <Button color="secondary" onClick={() => removeTodoItem(i)}>
              Remove
            </Button>
          </ListItem>
        ))}
      </List>
    </div>
  );
}

我们只是将组件拆分为单独的文件：

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

在整个应用程序中，我们不希望使用从 material-ui 库导入的默认 Button 和 Input 组件。相反，我们希望使用组件的自定义版本，方法是将自定义样式添加到其文件中styles对象中定义的组件中。现在，我们无需每次在应用程序中导入默认的Button和Input组件并一遍又一遍地向其添加自定义样式，只需导入一次默认Button和Input组件，添加样式，然后导出自定义组件即可。

import React from "react";
import Input from "@material-ui/core/Input";

const style = {
  root: { padding: "5px", backgroundColor: "#434343", color: "#fff" }
};

export default function CustomInput(props, { variant = "standard" }) {
  return (
    <Input
      style={style.root}
      {...props}
      variant={variant}
      placeholder="Type..."
    />
  );
}

请注意，我们在 Button.js 和 Input.js 中都有一个称为 style 的对象。由于此值是模块范围的，因此我们可以重用变量名称，而不会冒名称冲突的风险。

动态导入

导入文件顶部的所有模块时，所有模块都会先加载文件的其余部分。在某些情况下，我们只需要根据一定条件导入一个模块。通过动态导入，我们可以按需导入模块。

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

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

让我们动态导入前面段落中使用的 math.js 示例。只有当用户单击按钮时，模块才会被加载。

const button = document.getElementById("btn");

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

    const button = document.getElementById("btn");
    button.innerHTML = "Check the console";
  });
});

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

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

import React from "react";

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

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

  return src ? (
    <img src={src} alt="Dog" />
  ) : (
    <div className="loader">
      <button onClick={loadDogImage}>Click to load image</button>
    </div>
  );
}

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

用户单击“单击以加载图像”按钮后，将加载每个图像。图像是本地.png文件，根据我们传递给字符串的 num 值加载。

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

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

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