聊一聊 ES6 中的模块系统：import 和 export

ES6 的模块系统是一种新的 JavaScript 的模块化加载方案，它主要通过 import 和 export 两个关键字实现模块间的加载和导出。

import

import 是 ES6 中的一个关键字，用于加载模块中的指定部分，可以加载模块中导出的任何内容，包括变量、函数、类等等。

// javascriptcn.com 代码示例
// 导入模块中的一个变量
import { variable } from './module';

// 导入模块中的多个变量
import { variable1, variable2 } from './module';

// 导入模块中的所有导出
import * as module from './module';

// 导入默认导出
import module from './module';

我们可以使用 import 来加载其他模块导出的内容，这样我们就可以在我们的代码中复用其他模块的可复用代码了。

export

export 是 ES6 中的另一个关键字，用于导出当前模块中的变量、函数、类等等。export 可以导出多个变量、函数、类，也可以导出一个默认导出。

// javascriptcn.com 代码示例
// 导出一个变量
export const variable = 'someValue';

// 导出多个变量
export const variable1 = 'someValue1';
export const variable2 = 'someValue2';

// 导出一个函数
export const func = (arg1, arg2) => {
  return arg1 + arg2;
};

// 导出一个类
export class MyClass {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}

// 导出一个默认导出
export default class {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}

使用 export 也是为了方便我们对模块中的可复用代码进行封装和导出，让其他模块可以使用我们的代码。

示例代码

module.js

// javascriptcn.com 代码示例
export const variable = 'someValue';

export function add(a, b) {
  return a + b;
}

export class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

export default class Greeter {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}

app.js

// javascriptcn.com 代码示例
import { variable, add, Person } from './module';
import Greeter from './module';

console.log(variable); // 'someValue'
console.log(add(1, 2)); // 3

const person = new Person('Bob', 25);
person.sayHello(); // 'Hello, my name is Bob and I am 25 years old.'

const greeter = new Greeter('Alice');
greeter.sayHello(); // 'Hello, Alice!'

运行代码我们可以看到正确输出了 variable、add 函数、Person 类以及 Greeter 类。这就是 import 和 export 带来的便利，使我们可以在不同的模块之间轻松地共享可复用代码。

总结

ES6 的模块系统提供了非常好的模块化加载和导出功能，包括模块的 import 和 export 两个关键字。使用这些关键字，我们可以很方便地向其他模块导出代码，并获取其他模块导出的代码。这样，在复杂的应用程序中，我们可以更好地组织代码，使其更加清晰可维护。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f72b8bf6b2d6eab3fb28d1