随着应用程序和代码库的增长，保持代码的可维护性和独立性变得越来越重要。模块模式使得代码分割成更小的、可重用的部分。
除了此之外，模块还允许您将文件中的某些值保持为私有。默认情况下，模块内的声明的范围到该模块。如果我们不显式导出某个值，则该值在该模块之外不可用。这降低了代码库其他部分中声明的值发生名称冲突的风险，因为这些值在全局范围内不可用。
ES2015 Modules
ES2015 引入了内置 JavaScript 模块。模块是包含 JavaScript 代码的文件，与普通脚本相比，其行为存在一些差异。
让我们看一个名为 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 文件中使用这些函数，我们希望能够在 index.js 文件中引用它们。但是直接在 index.js 文件内调用会抛出错误： index.js 文件中没有名为 add 、 subtract 、 multiply 或 square 。
为了使 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";
拥有模块的一大好处是我们只能访问使用 export 关键字显式导出的值。我们未使用 export 关键字显式导出的值仅在该模块中可用。
让我们创建一个只能在 math.js 文件中引用的值，称为 privateValue 。
math.js
const privateValue = "This is a value private to the module!";
index.js
import { add, multiply, subtract, square } from "./math.js";
console.log(privateValue);
/* Error: privateValue is not defined */
通过将值保持为模块私有，可以降低意外污染全局范围的风险。
有时，导出的名称可能会与本地值发生冲突。
mport { 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 的函数。如果导入具有相同名称的值，最终会导致命名冲突，不过我们可以使用 as 关键字重命名导入的值。
让我们将导入的 add 和 multiply 函数重命名为 addValues 和 multiplyValues 。
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 来导出默认值。
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 函数。因为 JavaScript 知道您正在导入默认导出。
import addValues, { multiply, subtract, square } from "./math.js";
addValues(7, 8);
multiply(8, 9);
subtract(10, 3);
square(3);
我们还可以通过使用星号 * 并给出我们想要导入模块的名称来导入模块中的所有导出，即所有命名导出和默认导出。导入的值等于包含所有导入值的对象。假设我想将整个模块导入为 math 。
import * as math from "./math.js";
import * as math from "./math.js";
math.default(7, 8);
math.multiply(8, 9);
math.subtract(10, 3);
math.square(3);
在本例中，我们将从模块导入所有导出。执行此操作时要小心，因为您最终可能会导入不必要的值。
使用 * 仅导入所有导出的值。模块私有的值在导入模块的文件中仍然不可用，除非您显式导出它们。
Dynamic import 动态导入
当导入文件顶部的所有模块时，所有模块都会先于文件的其余部分加载。在某些情况下，我们只需要根据某种条件导入一个模块。通过动态导入，我们可以按需导入模块。
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";
});
});
/*************************** */
/**** 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() 函数还可以接收表达式。它允许我们传递模板文字，以便根据给定值动态加载模块。
import moment from "moment";
export const getCurrentTime = () => {
const date = moment().format("MMMM Do YYYY, h:mm:ss a");
return `Currently, it is ${date}`;
};
export const getCurrentDay = () => {
const day = moment().format("dddd");
return `It is ${day} today`;
};
import React from "react";
export function Date() {
const [currentTime, setCurrentTime] = React.useState("");
const [currentDay, setCurrentDay] = React.useState("");
async function loadDates() {
const module = await import("../utils/date");
setCurrentTime(module.getCurrentTime());
setCurrentDay(module.getCurrentDay());
}
return currentTime && currentDay ? (
<div>
<p>{currentTime}</p>
<p>{currentDay}</p>
</div>
) : (
<button onClick={loadDates}>Click to load dates</button>
);
}
在上面的示例中，仅当用户单击“Click to load dates”按钮时才会导入 date.js 模块。 date.js 模块导入第三方 moment 模块，该模块仅在 date.js 模块加载时导入。如果用户不需要显示日期，我们可以完全避免加载这个第三方库。
用户单击“单击加载图像”按钮后，将加载每个图像。图像是本地 .png 文件，根据我们传递给字符串的 num 值加载。
const res = await import(`../assets/dog${num}.png`);
这样，我们就不再依赖于硬编码的模块路径。它为您根据用户输入、从外部源接收的数据、函数结果等导入模块的方式增加了灵活性。
Summary
通过模块模式，我们可以封装不应该公开的部分代码。这可以防止意外的名称冲突和全局范围污染，从而降低使用多个依赖项和命名空间的风险。为了能够在所有 JavaScript 运行时中使用 ES2015 Module，需要通过类似 Babel 这样的转译器进行转译。