发布日期: 2023-08-20

更新日期: 2023-09-17

文章字数: 934

阅读时长: 3 分

阅读次数:

ECMAScript 6 (ES6) 是 JavaScript 的一个版本，它引入了许多新的语法特性和功能。其中包括 import 和 export 关键字，用于模块的导入和导出。

在 ES6 之前，JavaScript 并没有官方的模块系统，导致开发者使用各种自定义的模块加载器或框架来管理模块。ES6 的 import 和 export 关键字提供了一种标准化的模块化方案，使得开发者可以更方便地组织、管理和重用代码。

注意在ES6之前，JavaScript并没有官方的模块系统。开发者通常使用一些工具或框架来实现模块化的导入和导出功能。其中，一个常见的实现方式是使用模块加载器库（如RequireJS）来处理模块的导入和导出。

在理解 import 和 export 的使用方式之前，需要了解一些基本的概念：

模块：ES6 的模块是 JavaScript 中的一个独立文件，可以包含变量、函数、类等代码。每个模块可以通过 import 和 export 来与其他模块进行交互。

导出：使用 export 关键字将模块中的变量、函数或类导出，使其可以被其他模块引用。一个模块中可以有多个导出。

我们知道 Java 语言中，如果我们需要调用另一个类中的方法, 我们最简单的手段就是把他声明为 public 就行了。而在javascript中如果一个方法需要被其他模块能够使用，就要用 export 进行暴露，只要没有用export暴露的就都是当前模块私有的。你可以理解 export 就相当于给属性或者函数加了 public 修饰符而已。只不过 export 的用法比较灵活，它甚至可以在模块的最后在选择暴露，而不是在定义的时候暴露。这一点和 shell 这类面向过程的编程语言有点类似

导出 export & 导入 import

在ES6中，模块可以通过两种方式导出功能：默认导出和命名导出。

默认导出

一个模块可以使用 default 关键字导出一个默认的值，并且默认的导出在导入时可以随意命名。如果使用默认导出，可以在一个模块中只导出一个默认功能。当一个模块只需要导出一个功能时，可以使用默认导出。使用默认导出时，在导入该功能时可以就不用加{}了。{} 属于命名导出，其本质是解构语法。否则idea也会有提示。

例子：

// 导出默认值
export default function addNumbers(a, b) {
  return a + b;
}

// 导入默认值
import add from './math.js';

console.log(add(1, 2)); // 输出：3

命名导出

// 导出变量
export const name = 'John';
export let age = 25;

// 导出函数
export function sayHello() {
  console.log('Hello!');
}

// 导出类
export class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

导入：使用 import 关键字引入其他模块导出的变量、函数或类。导入的内容可以通过解构赋值的方式进行引用。

// 导入变量、函数、类
import { name, age, sayHello, Person } from './example.js';

console.log(name); // 输出：'John'
console.log(age); // 输出：25

sayHello(); // 输出：'Hello!'

const person = new Person('Alice', 30);
console.log(person.name); // 输出：'Alice'
console.log(person.age); // 输出：30