JavaScript 模块
提示
- 模块化代码组织:JavaScript 模块允许将代码分散到不同的文件中,以便于代码组织和维护。每个模块文件包含执行特定任务的代码,如变量、函数和类。
- 导出和导入功能:可以使用
export
关键字在一个文件中导出函数、变量或类,并使用import
关键字在另一个文件中导入这些元素。需要用{}
包裹导入的元素,除非它是默认导出。 - 重命名和默认导出:为避免命名冲突,可以在导出或导入时重命名函数或对象。每个文件只能有一个默认导出,可以在导入时使用任意名称引用,默认导出无需使用
{}
。
当我们的程序变得越来越大时,它可能包含许多代码行。你可以使用模块将代码分散到不同的文件中,而不是将所有内容放在一个文件中,根据它们的功能分开。这使我们的代码更有组织,更易于维护。
模块是包含执行特定任务代码的文件。一个模块可能包含变量、函数、类等。让我们看一个例子,
假设一个名为 greet.js 的文件包含以下代码:
// 导出一个函数
export function greetPerson(name) {
return `Hello ${name}`;
}
现在,要在另一个文件中使用 greet.js 的代码,你可以使用以下代码:
// 从 greet.js 文件中导入 greetPerson
import { greetPerson } from "./greet.js";
// 使用 greet.js 中定义的 greetPerson()
let displayName = greetPerson("Jack");
console.log(displayName); // Hello Jack
这里,
- greet.js 中的
greetPerson()
函数使用export
关键字导出
export function greetPerson(name) {
...
}
- 然后,我们使用
import
关键字在另一个文件中导入greetPerson()
。要导入函数、对象等,需要将它们放在{ }
中。
import { greetPerson } from "./greet.js";
注 意:你只能从模块中访问导出的函数、对象等。你需要使用 export
关键字导入特定的函数、对象等,然后在其他文件中使用它们。
导出多个对象
也可以从模块中导出多个对象。例如,
在文件 module.js 中
// 导出变量
export const name = "JavaScript Program";
// 导出函数
export function sum(x, y) {
return x + y;
}
在主文件中,
import { name, sum } from "./module.js";
console.log(name);
let add = sum(4, 9);
console.log(add); // 13
这里,
import { name, sum } from "./module.js";
这将从 module.js 文件中导入 name 变量和 sum()
函数。