ES6 模块 - JavaScript 教程

摘要: 在本教程中，您将了解ES6 模块，以及如何从模块导出变量、函数和类，并在其他模块中重用它们。

ES6 模块简介

在早期，JavaScript 最初用于执行小型脚本任务，为网页提供交互性。如今，JavaScript 已发展成为驱动浏览器和服务器（Node.js）中的完整应用程序。

为了处理这种增长，有必要将 JavaScript 代码模块化成模块，并使其在应用程序之间可重用。

ES6 引入了模块的概念。模块是一个 JavaScript 文件，它在严格模式下执行。这意味着在模块中声明的任何变量或函数都不会自动添加到全局作用域中。

好消息是，现代 Web 浏览器和Node.js支持原生 ES6 模块。这种原生支持简化了模块加载并优化了性能。

ES6 模块在 Node.js 版本 13 及以上版本中受支持。

ES6 模块示例

我们将创建一个具有以下目录和文件结构的新项目

├── index.html
└── js
   ├── index.js
   └── lib.jsCode language: plaintext (plaintext)

首先，在 lib.js 模块中定义一个名为 display() 的函数

function display(message) {
  const el = document.createElement('div');
  el.innerText = message;
  document.body.appendChild(el);
}Code language: JavaScript (javascript)

display() 函数通过创建一个 div 元素并将其附加到 body 元素来在网页上显示一条消息。

其次，在 index.html 文件中加载 index.js 文件

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ES6 Modules</title>
    </head>

    <body>

        <script src="js/index.js"></script>
    </body>

</html>Code language: HTML, XML (xml)

要使用 lib.js 文件中的 display() 函数在 index.js 文件中，可以使用 ES6 模块。以下步骤说明了如何完成它

步骤 1. 使用 export 语句在 lib.js 文件中导出 display() 函数

function display(message) {
  const el = document.createElement('div');
  el.innerText = message;
  document.body.appendChild(el);
}

export { display };Code language: JavaScript (javascript)

在此示例中，我们将函数名称 display 放在 export 关键字后的花括号内。这允许在其他模块中使用 display 函数。

步骤 2. 使用 import 语句从 lib.js 模块导入 display 函数，并调用 display() 函数以在网页上显示 Hi 消息

import { display } from './lib.js';

display('Hi');Code language: JavaScript (javascript)

在此示例中，我们将要导入的 display 函数名称放在花括号内，并指定我们要从中导入的模块名称 (lib.js)。

步骤 3. 在 index.html 中的 script 标签中添加 type="module"，以指示 Web 浏览器将 index.js 文件加载为模块

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ES6 Modules</title>
    </head>
    <body>

        <script src="js/index.js" type="module"></script>
    </body>
</html>Code language: HTML, XML (xml)

如果您在 Web 浏览器中打开 index.html，您将在网页上看到 Hi 消息。

摘要

ES6 模块允许您将 JavaScript 文件组织成模块。
ES 模块是 JavaScript 文件，它们在严格模式下执行。
使用 export 语句导出变量、函数和类。
使用 import 语句从其他模块导入变量、函数和类。
在脚本标签中使用 type="module" 指示 Web 浏览器将 JavaScript 文件加载为模块。

本教程对您有帮助吗？