Menu
CoddyTech

使用 import 导入

本课属于 Coddy JavaScript 学习旅程的“面向对象编程”单元。第 9 课,共 56 课。

从模块导出功能后,我们需要将其导入,才能在另一个文件中使用。import 语句可以让我们引入其他模块导出的值。

导入一个命名导出:

// 从模块中导入指定函数
import { greet } from './greeting.js';

// 现在我们可以使用 greet 函数了
greet('John'); // 输出:Hello, John!

你可以一次导入多个命名导出:

// 导入多个导出项
import { greet, farewell } from './greeting.js';

greet('John');      // 输出:Hello, John!
farewell('John');   // 输出:Goodbye, John!

导入默认导出:

// 导入默认导出(不需要花括号)
// 当另一个文件中有 export default functionName 时,就用这种方式
import Person from './person.js';

// 创建一个新的 Person 对象
const john = new Person('John');
challenge icon

挑战

简单

你正在构建一个注册表单。你有一个文件 validation-utils.js,其中包含实用的电子邮件验证函数。

你的任务:

  1. 导入 main.js 中的 validateEmail 函数(它是具名导出,不是默认导出)
  2. 调用该函数,并传入电子邮件地址 user@example.com
  3. 打印结果,使用 console.log

亲手试试

// TODO: 在这里导入 validateEmail 函数(它是具名导出)。

// TODO: 调用该函数,传入邮箱地址 user@example.com,并使用 console.log 打印结果。
quiz icon自我测试

这节课包含一个小测验。开始学习即可作答,并记录你的进度。

面向对象编程中的所有课

自己练习: JavaScript 在线编译器