跳转到主要内容
模块 8 · 第 1 课（共 4）课程中的29/32~12 min
模块课程（1/4）

ESM 模块：导入/导出

当程序增长时，将所有内容都保存在一个文件中会变得很尴尬。现代 JavaScript 解决了ES模块（ESM）的问题：每个文件都是一个可以导出的模块 函数、常量、类和其他文件可以导入它们。

export

您导出想要公开的内容。两种形式：

JS
// somma.js
export function somma(a, b) {
  return a + b;
}

export const PI = 3.14159;

或者，在文件末尾：

JS
function somma(a, b) {
  return a + b;
}
const PI = 3.14159;
export { somma, PI };

import

来自另一个文件：

JS
// app.js
import { somma, PI } from './somma.js';

console.log(somma(1, 2)); // 3
console.log(PI); // 3.14159

对象 { somma, PI } 是您要导入的名称列表。它们必须匹配 导出的名称。

默认导出

每个模块可以有一个“主”导出，没有名称：

JS
// log.js
export default function log(msg) {
  console.log('[app]', msg);
}

您可以通过在本地选择名称来导入它：

JS
import log from './log.js';
log('ciao');

重命名

JS
import { somma as plus } from './somma.js';
export { somma as add } from './somma.js'; // re-export

每个文件一个“命名空间”

模块是隔离的：文件中声明的变量最终不会出现在全局范围内。你 必须显式导出以使其在其他地方可见。这是一个巨大的进步 老式的 JS，每个 <script> 共享 window。

尝试一下

在下面的练习中，您将不会编写真正的 import/export 语法 - 沙箱是一个单一的 文件。相反，我们会要求您将代码组织成小的独立函数， 协作，就像每个人都在不同的文件中一样。

锻炼#js.m8.l1.e1
尝试：0加载中...

定义两个单独的函数：“square(n)”（返回 n*n）和使用 square 的“sumOfSquares(a, b)”。将 square 视为从文件“导出”并由 sumOfSquares 重用。

正在加载编辑器...
显示提示

平方和(a,b) = 平方(a) + 平方(b)

3 次尝试后可用的解决方案

复习练习

锻炼#js.m8.l1.e2
尝试：0加载中...

定义 `isEven(n)` （如果 n 为偶数则为 true）和 `countEven(arr)`，使用 isEven 来计算数组中的偶数元素。将它们保留为两个独立的函数。

正在加载编辑器...
显示提示

arr.filter(isEven).length

3 次尝试后可用的解决方案