详解JS模块导入导出

下面是详解JS模块导入导出的完整攻略。

什么是模块

在JavaScript中，模块（Module）指的是一个独立的、可复用的代码块，类似于传统的库（Library）。模块的引入可以将一个大的代码块分成多个小的代码块，这样便于结构化编程、提高代码复用性、隔离变量作用域等。

模块的导入导出

JavaScript中的模块可通过导入导出机制实现模块间的代码共享。

导出

要把一个JavaScript文件变成一个模块，需要将需要导出的变量、函数、类等暴露给外部使用。在ES6中，我们可以使用export关键字来实现导出，export可以导出单个变量、函数、类等，也可以通过合并 export 来导出多个。

下面是一个导出单个变量的示例：

// moduleA.js
const name = 'moduleA'
export default name

上面的示例中，我们通过export default name导出了一个名为name的变量，默认情况下该模块只能有一个default导出。

下面是一个导出多个变量的示例：

// moduleB.js
export const name = 'moduleB'
export const age = 18

上面的示例中，我们通过export导出了两个变量，分别为name和age。

导入

当我们需要使用某个模块中的变量、函数、类等时，我们需要将其导入。在ES6中，我们可以使用import关键字来实现导入，并使用{}来指定导入模块中的某些部分。

下面是一个导入单个变量的示例：

// main.js
import name from './moduleA'
console.log(name) // 输出moduleA

上面的示例中，我们使用import关键字导入了模块moduleA，并将moduleA中的default导出赋值给name变量。该示例中的输出结果为moduleA。

下面是一个导入多个变量的示例：

// main.js
import { name, age } from './moduleB'
console.log(name) // 输出moduleB
console.log(age)  // 输出18

上面的示例中，我们使用import关键字导入了模块moduleB，并将moduleB中的name、age导出通过{}分别赋值给name、age变量。该示例中的输出结果为moduleB和18。

注意点

在使用导入导出时，有以下几个注意点：

• 导入导出时必须使用相对路径或绝对路径。
• 导入时，{}中的变量名必须与导出的变量名一一对应。
• default导出不需要加{}，直接导入即可。
• 如果导入一个没有导出的变量，将会抛出错误。

结语

通过本篇文章的讲解，我们了解了JavaScript中模块的导入导出机制，以及如何在代码中进行导入导出操作。在实际开发中，模块化编程可以提高代码的可维护性和复用性，极大地提高了开发效率。