JavaScript 导出类
Anika Tabassum Era
2024年2月15日
JavaScript 导出/导入语句适用于 JavaScript 模块的内容在另一个模块中重用的情况。
可以有许多方法来执行任务,从单个模块到模块的细节传输以及从子模块到父模块的聚合。
JavaScript 中 export
语句的类型
JavaScript 中的 export
/import
语句有两种类型。一种是命名
导出,另一种是默认
导出。
通常,在 Default
类别中导出时,我们不使用花括号来包装基元或对象。但是在 Named
导出的情况下,我们使用花括号来包装多个对象或原语。
Default
仅处理从模块导出的一项,而 Named
可以取零或多于一。
我们将需要一个文件或模块来跟进示例。我们将它们命名为 test.js
和 New.js
。
但是为了与 ES6 兼容,我们需要将模块重命名为 test.mjs
和 New.mjs
。有多种方法可以执行此转换,但这很容易。
在这里,我们将看到一个具有 Default
类别的实例和另一个具有 Named
类别的实例。让我们跳到下一节。
JavaScript 中 Default
导出的示例
在此示例中,我们将在 test.mjs
中启动一个类 User
,我们将导出该类。User
类只有最喜欢的水果的名称。
接下来,在声明类的构造函数之后,让我们进入 New.mjs
模块并导入该类。我们还将通过设置一些值来触发导出的模块工作。
让我们检查一下这个例子。
// test.mjs
export default class User {
constructor(fruit) {
this.fruit = fruit;
}
}
// New.mjs
import User from './test.mjs';
var x = new User('Mango');
console.log(x);
输出:
JavaScript 中 Named
导出的示例
我们将为此实例采用一个带有虚拟数学的函数和一个变量。因此,我们将在要导出的每个数据之前声明 export
语句。
稍后,在我们的父模块 New.mjs
中,我们将根据选择导入和修改值。此线程中提供了正式的声明性解释。
代码片段:
// test.mjs
export function square(x) {
return x * x;
}
export var y = Math.PI * 5;
// New.mjs
import {square, y} from './test.mjs';
var x = 2;
console.log(square(x));
console.log(y);
输出: