JavaScript 导入导出教程与示例

电玩女神 2023-09-29 15:38 2阅读 0赞

我很高兴今天有机会与您分享 JavaScript 导入和导出语句。import 语句用于导入由另一个 JavaScript 文件导出的绑定。

代码可管理性是 Web 开发中最重要的因素。如果您正在构建具有大型代码库的应用程序，则管理该代码库并不容易。

通常，您必须滚动浏览数百甚至数千行代码，这使得调试过程非常困难。

怎么样？我们将一项任务分配给一个功能，并将其中一些功能保存在一个文件（组件）中。

**幸运的是，JavaScript 以导入**和**导出**语句的形式解决了这个问题。

JavaScript 中的模块是一小段代码，是一段可重用的代码，用于创建 JavaScript 应用程序。同样，您可以在一个文件中编写一些函数，并且 JavaScript 导入允许您通过该模块文件与各种其他 JavaScript 文件共享所有函数。

1.  [JavaScript 中的导入语法][JavaScript]
2.  [JavaScript 导入示例][JavaScript 1]
3.  [在 JavaScript 中导入多个模块][JavaScript 2]
4.  [JavaScript 导入导出模块作为别名][JavaScript 3]
5.  [JavaScript 中的动态导入][JavaScript 4]
6.  [JavaScript 导入默认值][JavaScript 5]
7.  [JavaScript 导入 \*][JavaScript _]
8.  [结论][Link 1]

### **JavaScript 中的导入语法** ###

以下是在 JavaScript 中导入文件的语法。如下所示，导入语法基于单个或多个文件要求的导入条件。

import defaultExport from "module-name";
    import * as name from "module-name";
    import { data1 } from "module-name";
    import { data1 as alias1 } from "module-name";
    import { data1 , data2 } from "module-name";
    import { foo , bar } from "module-name/path/to/specific/un-exported/file";
    import { data1 , data2 as alias2 , [...] } from "module-name";
    import defaultExport, { export1 [ , [...] ] } from "module-name";
    import defaultExport, * as name from "module-name";
    import "module-name";
    var promise = import("module-name");

打字稿

复制

`defaultExport`– 这是一个引用模块中默认导出语句的名称。

`name`– 名称值是模块对象的名称，被描述为用作一种命名空间来引用导入。

`module-name`– 这是模块必须从中导入的模块。

`dataN`– 这是必须导入的导出的名称。

`aliasN`– 属于 Javascript 中命名导入的名称。

### **JavaScript 导入示例** ###

我想首先创建一个**js-imports-example**项目目录，并在其中为 JavaScript 导入和导出语句示例生成三个文件。

*  app.js
 *  run.js
 *  data-module.js

接下来，运行命令在项目文件夹中生成**package.json文件。**

npm init -y

重击

复制

接下来，安装[babel-register][]和 babel-preset-env 插件作为开发依赖项。这些插件在我们的 node.js 项目中添加了导入和导出支持。

npm install --save-dev babel-register babel-preset-env

重击

复制

上面的命令创建**node\_modules**文件夹并在其中安装两个插件。

接下来，打开**run.js**文件并在其中添加以下代码。

// run.js
    require('babel-register')({
        presets: ['env']
    });
    module.exports = require('./app.js')

JavaScript

复制

require 钩子有助于将自身绑定到节点的 require 语句并自动动态编译文件。

在下一步中，我们将创建一个 JavaScript 模块文件并在**data-module.js**文件中添加一些数据。

// Data-module.js
    export const calculateCircumference = ((radius) =>  {
        return 2 * Math.PI * radius;
    })

JavaScript

复制

**在这里，我们定义了使用Math.PI**方法计算圆的周长的小函数。

我们使用 export const 语句初始化了这个模块。通过这样做，我们可以轻松地在整个 JavaScript 应用程序中导出这个类。这个小函数可用于获取圆的半径并将数值作为参数。

如果你注意到了，我们已经使用**es6 语法**在**data-module.js**文件中创建了**es6 模块。**

现在，让我们在**app.js**文件中添加数据，并学习如何在 JavaScript 中从另一个文件中导入变量。

// app.js
    import { calculateCircumference } from './data-module';
    console.log(calculateCircumference(2))

JavaScript

复制

我们从特定模块导入数据模块文件和特定的 calculateCircumference() 方法。

让我们运行以下命令来运行代码并检查导入和导出功能的结果。

node run.js

重击

复制

# Output
    12.566370614359172

重击

复制

### **在 JavaScript 中导入多个模块** ###

到目前为止，我们已经学习了如何导入单个模块，现在我们将看看如何在 JavaScript 中导出多个模块，然后导入多个模块。

转到**data-module.js**文件并在特定文件中定义其他模块。

// Data-module.js
    export const calculateCircumference = ((radius) =>  {
        return 2 * Math.PI * radius;
    })
    export const toCelsius = ((f) => {
        return (5/9) * (f-32);
    })

JavaScript

复制

我们创建了另一个将华氏温度转换为摄氏温度的函数。

接下来，导入**app.js**文件中的两个模块，如下所示。

// app.js
    import { calculateCircumference, toCelsius } from './data-module';
    console.log(calculateCircumference(2))
    console.log(toCelsius(77))

JavaScript

复制

然后，从终端运行**\`node run.js\`**命令以获取上述导入的结果。

# node run.js
    12.566370614359172
    25

重击

复制

### **JavaScript 导入导出模块作为别名** ###

JavaScript 允许我们重命名导出，特别是当我们从另一个文件导入它时。例如，我们将**tc**别名赋予**toCelsius**模块。

// app.js
    import { toCelsius as tc } from './data-module';
    console.log(tc(77))
    // Result => 25

JavaScript

复制

如您所见，我们将**toCelsius**转换为**tc**，它工作得非常好。

### **JavaScript 动态导入** ###

动态导入在您需要有条件地按需加载模块的情况下很有用。静态形式有利于初始加载依赖项。

import('/modules/module-file.js')
      .then((module) => {
        // module response.
    });

打字稿

复制

可以调用**import**关键字作为动态导入模块的方法。如上所示使用时，它会返回一个 Promise。

动态导入也支持 ES **await**关键字。

const module = await import('/modules/module-file.js');

打字稿

复制

### **在 JavaScript 中导入默认值** ###

假设我们在**data-module.js**文件中只有一个可用的导出默认函数或模块。

// data-module.js
    const calculateCircumference = ((radius) =>  {
        return 2 * Math.PI * radius;
    })
    export default calculateCircumference;

JavaScript

复制

在给定的代码中，我们定义了**export default 关键字**，这意味着我们正在从**data-module.js**文件中导出**calculateCircumference**函数。

现在，导入默认值有待完成，我们在**data-module.js**文件中获得了单个默认模块。它可以导入到主**app.js**文件中，如下所示。

// app.js
    import calculateCircumference from './data-module';
    console.log(calculateCircumference(2))
    // Result => 12.566370614359172

JavaScript

复制

### **JavaScript 导入 \*** ###

通常，我们在花括号 import \{...\} 中创建要导入的内容列表，如下所示：

打开**data-module.j**文件，在其中添加以下代码。

// data-module.js
    const calculateCircumference = ((radius) =>  {
        return 2 * Math.PI * radius;
    })
    const toCelsius = ((f) => {
        return (5/9) * (f-32);
    })
    export {calculateCircumference, toCelsius};

JavaScript

复制

**我们正在从 data-module 文件中导出两个模块，现在我们将学习在app.js**文件中导入这两个模块。

打开**app.js**文件并在其中包含以下代码。

// app.js
    import * as math from './data-module';
    math.calculateCircumference(2)
    math.toCelsius(77)

JavaScript

复制

**在 JavaScript 中**使用import \*可以让我们一次导入所有模块。

查看上述代码的输出。

# node run.js
    12.566370614359172
    25

重击

复制

### **结论** ###

在本教程中，我们学习了以下类型的导入和导出。

#### 进口： ####

从模块命名的导出：  
import \{x \[as y\], ...\} from “module”

**默认导出：**  
import x from “module”  
import \{default as x\} from “module”

**一切：**  
import \* as obj from “module”  
导入模块，但不要将其分配给变量：  
import “module”

#### 出口 ####

在声明类/函数/…之前：  
export \[default\] 类/函数/变量…

**独立导出：**  
export \{x \[as y\], ...\}。

**重新导出**：  
export \{x \[as y\], ...\} from “module”  
export \* from “module”（默认不重新导出）。  
从“模块”导出 \{default \[as y\]\}（重新导出默认值）。

所以在本教程中，我们学习了如何使用 JavaScript 导出语句、导入语句、动态模块导入、JavaScript 导入 \* 和导入默认值。

我们试图阐明几乎所有主题。但是，您愿意了解更多关于 JavaScript 导入语句的信息，然后访问[MDN][]。

最后，我们通过示例完成了 JavaScript 导入和导出教程。

[JavaScript]: https://www.positronx.io/javascript-import-statement-tutorial-with-examples/#tc_8279_01
[JavaScript 1]: https://www.positronx.io/javascript-import-statement-tutorial-with-examples/#tc_8279_02
[JavaScript 2]: https://www.positronx.io/javascript-import-statement-tutorial-with-examples/#tc_8279_03
[JavaScript 3]: https://www.positronx.io/javascript-import-statement-tutorial-with-examples/#tc_8279_04
[JavaScript 4]: https://www.positronx.io/javascript-import-statement-tutorial-with-examples/#tc_8279_05
[JavaScript 5]: https://www.positronx.io/javascript-import-statement-tutorial-with-examples/#tc_8279_06
[JavaScript _]: https://www.positronx.io/javascript-import-statement-tutorial-with-examples/#tc_8279_07
[Link 1]: https://www.positronx.io/javascript-import-statement-tutorial-with-examples/#tc_8279_08
[babel-register]: https://www.npmjs.com/package/babel-register
[MDN]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import