随着应用程序和代码库的增长，保持代码的可维护性和分离性变得越来越重要。
模块模式将代码拆分为更小的、可重用的部分。
除了能够将代码拆分为更小的可重用部分之外，模块还允许您将文件中的某些值保密。
默认情况下，模块内的声明范围（封装）到该模块。
如果我们不明确导出某个值，则该值在该模块之外不可用。 这降低了代码库其他部分中声明的值发生名称冲突的风险，因为这些值在全局范围内不可用。
ES6 Modules
ES2015 引入了内置的 JavaScript 模块。 模块是一个包含 JavaScript 代码的文件，与普通脚本相比，在行为上有一些不同。
让我们看一个名为 math.js 的模块的示例，其中包含数学函数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//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;
}
|
我们有一个包含一些简单数学逻辑的 math.js 文件。我们有一些函数允许用户加、乘、减和得到他们传递的值的平方。
然而，我们不只是想在 math.js 文件中使用这些函数，我们希望能够在 index.js 文件中引用它们！
目前，在 index.js 文件中抛出一个错误：在 index.js 文件中没有称为加、减、乘或平方的函数。
我们正在尝试引用 index.js 文件中不可用的函数。
1
2
3
4
5
6
7
|
//index.js
console.log(add(2, 3)); //ReferenceError: add is not defined
console.log(multiply(2)); //ReferenceError: multiply is not defined
console.log(subtract(2, 3)); //ReferenceError: subtract is not defined
console.log(square(2)); //ReferenceError: square is not defined
|
为了使 math.js 中的函数可用于其他文件，我们首先必须导出它们。
为了从模块中导出代码，我们可以使用 export 关键字。
导出函数的一种方法是使用命名导出：我们可以简单地在要公开的部分前面添加 export 关键字。
在这种情况下，我们希望在每个函数前添加 export 关键字，因为 index.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;
}
我们刚刚使加、乘、减和平方函数可导出！ 但是，仅从模块中导出值不足以使它们对所有文件公开可用。
为了能够使用从模块导出的值，必须在需要引用它们的文件中显式导入它们。
必须使用 import 关键字在 index.js 文件顶部引用值。
为了让 javascript 知道我们想要从哪个模块导入这些函数，我们需要添加一个 from 值和模块的相对路径。
import { add, multiply, subtract, square } from "./math.js";
我们刚刚从 index.js 文件中的 math.js 模块导入了四个函数！ 让我们试试看我们现在是否可以使用这些功能！
1
2
3
4
5
6
7
8
|
//index.js
import { add, multiply, subtract, square } from "./math";
console.log(add(2, 3)); //5
console.log(multiply(2)); //4
console.log(subtract(2, 3)); //-1
console.log(square(2)); //4
|
引用错误消失了，现在可以使用从模块导出的值！
拥有模块的一大好处是我们只能访问使用 export 关键字显式导出的值。没有使用 export 关键字显式导出的值仅在该模块中可用。
让我们创建一个只能在 math.js 文件中引用的值，称为 privateValue。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
//math.js
const privateValue = "这是模块私有的值！";
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 模块之外访问这个值！
1
2
3
4
5
6
|
//index.js
import { add, multiply, subtract, square } from "./math.js";
console.log(privateValue);
/* Error: privateValue is not defined */
|
通过保持模块的私有值，降低了意外污染全局范围的风险。
不必担心开发人员意外覆盖您的模块创建的值，这些值可能与您的私有值具有相同的名称：它可以防止命名冲突。
有时，导出的名称可能会与本地值发生冲突。
1
2
3
4
5
6
7
8
9
10
11
|
import { add, multiply, subtract, square } from "./math.js";
function add(...args) {
return args.reduce((acc, cur) => cur + acc);
} /* Error: add 已经被声明 */
function multiply(...args) {
return args.reduce((acc, cur) => cur * acc);
}
/* Error: multiply 已经被声明 */
|
在这种情况下，我们在 index.js 中有名为 add 和 multiply 的函数。
如果我们导入同名的值，最终会发生命名冲突：add 和 multiply 已经被声明了！
幸运的是，我们可以使用 as 关键字 重命名导入的值。
让我们将导入的加法和乘法函数重命名为 addValues 和 multiplyValues。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
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 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’
import add, { multiply, subtract, square } from "./math.js";
add(7, 8);
multiply(8, 9);
subtract(10, 3);
square(3);
如果有可用的默认导出，则从不带括号的模块导入的值始终是默认导出的值。
由于 JavaScript 知道该值始终是默认导出的值，因此我们可以为导入的默认值指定另一个名称，而不是导出时使用的名称。
例如，我们可以将其称为 addValues，而不是使用名称 add 导入 add 函数。
import addValues, { multiply, subtract, square } from "./math.js";
addValues(7, 8);
multiply(8, 9);
subtract(10, 3);
square(3);
即使导出了名为 add 的函数，我们也可以将其导入并调用任何我们喜欢的名称，因为 JavaScript 知道您正在导入默认导出。
还可以通过使用星号 * 并给出我们希望将模块导入的名称，从模块导入所有导出，即所有命名导出和默认导出。
导入的值等于一个包含所有导入值的对象。 假设我想将整个模块作为数学导入。
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 构建应用程序时，您经常需要处理大量组件。
不是将所有这些组件都写在一个文件中，我们可以将这些组件分开在它们自己的文件中，本质上为每个组件创建一个模块。
我们有一个基本的待办事项列表，包含一个列表 list、列表项 list items、一个输入字段 input field和一个按钮 button。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
//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>
);
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
//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..."
/>
);
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
//TodoList.js
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>
);
}
|
我们只是将组件拆分到单独的文件中：
- 列表组件的 TodoList.js
- Button.js 用于自定义 Button 组件
- Input.js 用于自定义 Input 组件。
在整个应用程序中，我们不想使用从 material-ui 库导入的默认 Button 和 Input 组件。
相反，我们想要使用我们的自定义版本的组件，通过向其添加自定义样式，在它们的文件中的样式对象中定义。
与其在我们的应用程序中每次都导入默认的 Button 和 Input 组件并一遍又一遍地向其添加自定义样式，
不如简单地导入一次默认的 Button 和 Input 组件，添加样式，然后导出我们的自定义组件。
请注意我们如何在 Button.js 和 Input.js 中都有一个名为 style 的对象。 由于此值是模块范围的，我们可以重用变量名称而不会冒名称冲突的风险。
动态导入
当在文件顶部导入所有模块时，所有模块都会在文件的其余部分之前加载。
在某些情况下，只需要根据某个条件导入一个模块。
通过动态导入，可以按需导入模块。
1
2
3
4
5
6
7
8
9
10
11
12
|
import("module").then(module => {
module.default();
module.namedExport();
});
// Or with async/await
(async () => {
const module = await import("module");
module.default();
module.namedExport();
})();
|
让我们动态导入前面段落中使用的 math.js 示例。
该模块仅在用户单击按钮时加载。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
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";
});
});
/*************************** */
/**** Or with async/await ****/
/*************************** */
// button.addEventListener("click", async () => {
// const module = await import("./math.js");
// console.log("Add: ", module.add(1, 2));
// console.log("Multiply: ", module.multiply(3, 2));
// });
|
通过动态导入模块，我们可以减少页面加载时间。 我们只需要在用户需要时加载、解析和编译用户真正需要的代码。
除了能够按需导入模块之外，import() 函数还可以接收表达式。 它允许我们传递模板文字，以便根据给定值动态加载模块。
在上面的示例中，仅当用户单击“单击以加载日期”按钮时才会导入 date.js 模块。
date.js 模块导入第三方的 moment 模块，只有在加载 date.js 模块时才会导入。
如果用户不需要显示日期，我们可以完全避免加载这个第三方库。
用户单击“单击以加载图像”按钮后，将加载每个图像。 图像是本地 .png 文件，它们根据我们传递给字符串的 num 值加载。
const res = await import(`../assets/dog${num}.png`);
这样，我们不依赖于硬编码的模块路径。 它增加了您可以根据用户输入、从外部源接收的数据、函数的结果等导入模块的方式的灵活性。
优点
使用模块模式，可以封装不应公开的代码部分。
这可以防止意外的名称冲突和全局范围污染，从而降低使用多个依赖项和命名空间的风险。
为了能够在所有 JavaScript 运行时中使用 ES2015 模块，需要像 Babel 这样的转译器。
知识点
- export 命名导出
- import { module } from ‘module’ 命名导入
- as 重命名导入的值 import {a as b} from ‘module’, 将a命名为b
- export default 默认导出
- import module from ‘module’ 默认导入（或者 import a as b from ‘module’）
* 所有命名导出和默认导出- await import(module) 动态加载