JavaScript 导入 - JavaScript 教程

摘要: 本教程将教你如何使用 JavaScript 导入关键字从另一个模块导入变量、函数和类。

JavaScript 导入关键字简介

ES6 模块允许您将 JavaScript 代码结构化为模块并在它们之间共享值（变量、函数、类等）。

要从模块导入值，请使用import关键字。此外，您需要将 JavaScript 源文件加载为模块。在 HTML 中，您可以通过在 script 标签中指定type="module"来实现。

<script type="module" src="app.js"></script>Code language: JavaScript (javascript)

我们将以一个简单的例子来说明如何使用import关键字。

假设我们有一个具有以下结构的项目

├── index.html
└── js
   ├── app.js
   └── greeting.jsCode language: JavaScript (javascript)

在这个项目中，index.html将app.js加载为一个模块

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript import</title>
    </head>
    <body>
        <script src="js/app.js" type="module"></script>
    </body>
</html>Code language: JavaScript (javascript)

greeting.js模块有一个函数sayHi()函数，用于显示一条消息。它将sayHi()函数导出为默认导出

export default function sayHi() {
  alert('Hi');
}Code language: JavaScript (javascript)

app.js将从greeting.js模块导入sayHi()方法并执行它。

导入默认导出

如果一个模块使用默认导出，您可以使用以下语法从该模块导入默认导出

import name from 'module.js';Code language: JavaScript (javascript)

例如，您可以将sayHi()函数从greeting.js模块导入到app.js模块，如下所示

import sayHi from './greeting.js';

sayHi();Code language: JavaScript (javascript)

如果您在 Web 浏览器中打开index.html，您将看到一条警报消息。

因为sayHi()函数是默认导出，所以您可以在导入时为它分配任何您想要的名称。

例如，您可以从greeting.js模块导入sayHi函数，并将其名称设置为displayGreeting()，如下所示

import displayGreeting from './greeting.js';

displayGreeting();Code language: JavaScript (javascript)

导入命名导出

与导入默认导出不同，您需要在将命名导出导入到模块时指定其确切名称。此外，您需要将命名导出放在一对花括号内。

以下是导入命名导出的语法

import { namedExport1, namedExport2} from 'module.js';Code language: JavaScript (javascript)

例如，我们可以修改包含两个命名导出的greeting.js模块

export function sayHi() {
  alert('Hi');
}

export function sayBye() {
  alert('Bye');
}Code language: JavaScript (javascript)

要将sayHi()和sayBye()函数导入到app.js模块，请使用以下代码

import { sayHi, sayBye } from './greeting.js';Code language: JavaScript (javascript)

您也可以调用这些函数

import { sayHi, sayBye } from './greeting.js';

sayHi();
sayBye();Code language: JavaScript (javascript)

如果您在 Web 浏览器中打开index.html，您将看到由这两个函数创建的两个警报。

命名空间导入

模块命名空间对象是一个静态对象，其中包含来自模块的所有导出。它是一个静态对象，JavaScript 在评估模块时创建它。

要访问模块命名空间对象，请使用以下语法

import * as name from 'module.js';Code language: JavaScript (javascript)

在此语法中，name是模块命名空间对象，它包含来自module.js模块的所有导出作为属性。

例如，如果modules.js具有myVariable、myFunction和myClass命名导出，您可以通过name对象访问它们，如下所示

name.myVariable
name.myFunction
name.myClassCode language: JavaScript (javascript)

为了说明命名空间导入的工作原理，我们可以将app.js更改为使用命名空间导入，如下所示

import * as greeting from './greeting.js';

greeting.sayHi();
greeting.sayBye();Code language: JavaScript (javascript)

以下将greeting指定为模块命名空间对象

import * as greeting from './greeting.js';Code language: JavaScript (javascript)

一旦我们有了模块命名空间对象，我们就可以调用sayHi()和sayBye()函数

greeting.sayHi();
greeting.sayBye();Code language: JavaScript (javascript)

如果导入模块具有默认导出，则可以通过default关键字访问它

name.defaultCode language: JavaScript (javascript)

例如，我们可以将greeting.js模块中的sayHi函数更改为默认导出

export default function sayHi() {
  alert('Hi');
}

export function sayBye() {
  alert('Bye');
}Code language: JavaScript (javascript)

并将导出从greeting.js模块导入到app.js模块，使用命名空间导入

import * as greeting from './greeting.js';

greeting.default(); // sayHi()
greeting.sayBye();Code language: JavaScript (javascript)

在这种情况下，我们可以通过上面的default()调用sayHi()函数。请注意，您无法使用像这样使用其名称来访问sayHi()函数

greeting.sayHi();Code language: JavaScript (javascript)

如果您这样做，您将收到以下错误

Uncaught TypeError: greeting.sayHi is not a functionCode language: JavaScript (javascript)

重命名命名导出

当您导入命名导出时，您可以为它分配一个新名称。当您从不同的模块导入具有相同名称的函数时，这很有用

import { name as name1 } from "module1.js";
import { name as name2 } from "module2.js";Code language: JavaScript (javascript)

例如，以下说明了如何在导入到app.js模块时将sayHi()和sayBye()函数重命名为hi()和bye()

import { sayHi as hi, sayBye as bye } from './greeting.js';

hi();
bye();Code language: JavaScript (javascript)

总结

使用 JavaScript import关键字将变量、函数和类导入到模块中。

本教程是否有帮助？