ES6 模块

17 Mar 2025 | 6 分钟阅读

模块是使用文件编写的 JavaScript 代码片段或块。 JavaScript 模块通过将整个代码划分为可以从任何地方导入的模块，帮助我们模块化代码。模块使维护代码、调试代码和重用代码片段变得容易。每个模块都是一个代码片段，它在加载后执行一次。

ES6 中的模块是一个基本概念。尽管它并非随处可用，但今天我们可以使用它并将其转译成 ES5 代码。转译是将代码从一种语言转换为其等效语言的过程。 ES6 模块转译器工具负责获取 ES6 模块并将其转换为 AMD （异步模块定义是 JavaScript 编程语言的规范）或 CommonJS 风格的兼容代码。

在构建过程中，我们可以使用 Gulp、Babel、Grunt 或其他 转译器 来编译模块。除非文件导出，否则模块中的变量和函数不可供使用。

导出和导入模块

导出模块

JavaScript 允许我们使用 export 关键字导出函数、对象、类和原始值。有两种导出

命名导出： 以其名称区分的导出称为命名导出。我们可以使用命名导出导出多个变量和函数。
默认导出： 最多只能有一个值可以使用默认导出进行导出。

导入模块

要导入模块，我们需要使用 import 关键字。可以使用 import 关键字导入从模块导出的值。我们可以在另一个模块中导入导出的变量、函数和类。要导入模块，我们只需指定它们的路径即可。

当您导入命名导出时，您必须使用与相应对象相同的名称。当您导入默认导出时，我们可以使用相应对象的任何名称。

让我们详细阐述这些导出和导入。

命名导出和导入

命名导出通过其名称区分。使用命名导出导出的类、变量或任何函数只能通过使用相同的名称导入。

可以使用命名导出导入和导出多个变量和函数。

语法

让我们看看在类、函数或变量中使用命名导出的语法。在下面，我们展示了如何通过使用命名导出单独导出类、变量和函数。

//Named export in class
class Nokia{
//properties
//methods
}
export {Nokia}; //Named export

//Named export in functions
function show(){
}
export {show};

//Named export in Variables
const a = 10;
export {a};

我们可以在一个模块中应用多个命名导出。我们可以按如下方式在一个模块中使用多个命名导出的语法

Mobile.js

class Nokia{
//properties
//methods
}
function show(){
}
const a = 10;
export {Nokia, show};

让我们看看如何导入命名导出。

导入命名导出

要导入由另一个模块导出的绑定，我们必须使用静态 import 语句。 导入的模块始终处于严格模式，无论我们是否以严格模式声明它们。

语法

App.js

全部导入

如果我们想同时导入所有导出语句，那么我们可以单独导入它们。

但是，当我们有这么多命名导出时，这将很困难。因此，为了使其更容易，我们可以按如下方式进行操作

import * as device from './Mobile.js'; // Here, the device is an alias, and Mobile.js is the module name.

假设，我们在模块 Mobile.js 中定义了一个类 Nokia，并且如果我们想使用它，那么通过使用别名，我们可以执行此操作

device.Nokia //if we have a class Nokia
device.show // if we have a function show
device.a // if we have a variable a

让我们尝试在一个示例中理解命名导出和导入。

我们必须创建两个 JavaScript 模块才能执行导出和导入。在第一个模块中，我们导出类、函数和变量。在第二个模块中，我们将使用命名导入导入它们。

示例 - 命名导出和导入

在这里，我们正在创建两个 JavaScript 模块，其中第一个 JavaScript 模块是 Mobile.js， 并且第二个模块名称是 App.js。 我们还在创建一个 HTML 文件 Example.html。 然后，我们将在服务器中执行这个 .html 文件。

接下来，我们必须使用 <script></script> 标签中的 src 属性手动链接 HTML 文件中的 JavaScript 文件。但该模块仍然无法工作。要启用模块，我们必须在 <script></script> 标签中使用 type = "module"。

Example.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type = "module" src = "App.js"></script>
    <title>Document</title>
</head>
<body>
    <h1>ES6 Modules import and export</h1>
</body>
</html>

Mobile.js

class Display{
    show(){
        console.log("Hello World :)");
    }
}
function javaT(){
    console.log("Welcome to javaTpoint");
}
export {Display,javaT};

App.js

import {Display,javaT} from "./Mobile.js";
const d = new Display();
d.show();
javaT();

输出

在实时服务器中运行上述 Example.html 文件。然后，通过使用 ctrl+shift+I 在浏览器中打开终端。成功执行后，您将获得以下输出

默认导出和导入

我们可以在一个模块中只有一个默认导出。可以使用任何名称导入默认导出。

语法

让我们看看在类、函数或变量中使用默认导出的语法。在下面，我们展示了如何通过使用 default 导出单独导出类、变量和函数。

与命名导出不同，我们不能同时在默认导出中进行多个 export 语句。

//Default export in class
class Nokia{
//properties
//methods
}
export default Nokia; //Default export

//Deafult export in functions
function show(){
}
export default show;

//Default export in Variables
const a = 10;
export default a;

导入默认导出

要导入由另一个模块导出的绑定，我们必须使用静态 import 语句。 导入的模块始终处于严格模式，无论我们是否以严格模式声明它们。

语法

Mobile.js

class Nokia{
    //properties
    //methods
}
export default Nokia;

App.js

示例 - 默认导入和导出

Example.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type = "module" src = "App.js"></script>
    <title>Document</title>
</head>
<body>
    <h1>ES6 Modules import and export</h1>
    <h2>Default import and export</h2>
</body>
</html>

Mobile.js

class Display{
        show(){
            console.log("Hello World :)");
            console.log("Default Import and Export Example");
        }
    }
    export default Display;

App.js

import Display from "./Mobile.js";
const d = new Display();
d.show();

输出

在实时服务器中运行上述 Example.html 文件。然后，通过使用 ctrl+shift+I 在浏览器中打开终端。成功执行后，您将获得以下输出

ES6 循环依赖

循环依赖是指两个或多个相互依赖的模块之间的直接或间接关系。这样的模块被称为互递归模块。

ES6 中的模块自动支持循环依赖。如果 A 导入 B 并且 B 导入 A（无论是传递还是间接），则两个模块（例如 A 和 B）彼此循环依赖。

假设我们有三个名为 A、B 和 C 的模块。它们的依赖关系链类似于 A->B->C->A，即 A 依赖于 B； B 依赖于 C，而 C 依赖于 A。

CommonJS 和其他一些库支持循环依赖，但从循环依赖模块导入和使用命名导出存在问题。

ES6 通过共享对值的绑定而不是导出本身的值来解决这个问题。这意味着可以完成与模块主体中声明的变量的连接。我们可以在以下代码中看到相同的演示

示例

Example.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type = "module" src = "App.js"></script>
    <title>Document</title>
</head>
<body>
    <h1>ES6 Cyclic dependencies</h1>
</body>
</html>

Mobile.js

export let count = 0;
export function show() {
    count++;
}

App.js

import { show, count } from './Mobile.js';
console.log(count); 
show();
console.log(count);

输出

下一个主题ES6 Promises

← 上一个下一个 →

ES6 模块

导出和导入模块

导出模块

导入模块

命名导出和导入

导入命名导出

示例 - 命名导出和导入

默认导出和导入

导入默认导出

示例 - 默认导入和导出

ES6 循环依赖

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ES6 教程

ES6 函数

ES6 数组

ES6 对象

ES6 类

ES6 字符串

高级特性

ES6 其他

面试题

ES6 模块

导出和导入模块

导出模块

导入模块

命名导出和导入

导入命名导出

示例 - 命名导出和导入

默认导出和导入

导入默认导出

示例 - 默认导入和导出

ES6 循环依赖

示例

相关帖子

ES6 Cookie

ES6 页面重定向

ES6 布尔值

ES6 void 关键字

ES6 对话框

ES6 Promise

ES6 事件

ES6 验证

ES6 动画

ES6 页面打印

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器