ES6 模块备忘清单：巧用模块，让编码更轻松！

2023-09-13 11:27:01

在编码时，模块的概念至关重要，它允许程序员将代码分解成独立的可重用单元。模块化编程的好处在于它可以提高代码的组织性和可维护性，同时还能提高开发效率。ES6 模块尤为重要，它引入了新的语法和特性，使 JavaScript 模块化编程更加强大。因此，我们将特别关注 ES6 模块，分享一些你可能尚未意识到的用法和技巧。

ES6 模块备忘清单

在 ES6 中，有三种主要的模块导出方式：

名称导出 (Named Exports)： 使用 export 语句将变量、函数或类导出为具有特定名称。
默认导出 (Default Exports)： 使用 export default 语句导出一个变量、函数或类作为模块的默认导出。
列表导出 (List Exports)： 使用 export { } 语句导出多个变量、函数或类。

相应的，有三种主要的模块导入方式：

名称导入 (Named Imports)： 使用 import 语句导入具有特定名称的变量、函数或类。
默认导入 (Default Imports)： 使用 import 语句导入模块的默认导出。
列表导入 (List Imports)： 使用 import * as 语句导入模块的所有导出。

让我们通过一些代码示例来更直观地了解这些导出和导入方式。

名称导出和导入：

// 模块1.js
export const name = "John";
export function sayHello() {
  console.log("Hello, world!");
}

// 模块2.js
import { name, sayHello } from "./module1.js";

console.log(name); // "John"
sayHello(); // "Hello, world!"

默认导出和导入：

// 模块1.js
export default function add(a, b) {
  return a + b;
}

// 模块2.js
import add from "./module1.js";

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

列表导出和导入：

// 模块1.js
export const name = "John";
export function sayHello() {
  console.log("Hello, world!");
}
export class Person {
  constructor(name) {
    this.name = name;
  }
}

// 模块2.js
import * as module1 from "./module1.js";

console.log(module1.name); // "John"
module1.sayHello(); // "Hello, world!"
const person = new module1.Person("Jane");
console.log(person.name); // "Jane"