在于 ES10 中正确的使用 ES6 模块的导入 / 导出-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，JavaScript 模块化是必不可少的一环。ES6 的导入 / 导出语法为 JavaScript 模块化提供了新的解决方案，而在 ES10 中，这种语法得到了进一步的完善。本文将深入探讨 ES10 中正确使用 ES6 模块的导入 / 导出。

导出

在 ES6 中，我们通过 export 将模块中的内容导出，如：

// javascriptcn.com 代码示例
// export a variable
export const pi = 3.14;

// export a function
export function square(x) {
  return x * x;
}

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

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

在 ES10 中，我们可以使用命名导出和默认导出。命名导出是指通过 {} 包裹的导出，而默认导出则是指不加 {} 直接导出。一个 JS 文件只能有一个默认导出，但是可以有多个命名导出。

命名导出

// javascriptcn.com 代码示例
// named export: a variable
export const PI = 3.14;

// named export: a function
export function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

// named export: a class
export class Person {
  constructor(name) {
    this.name = name;
  }

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

我们可以使用以下方式来消费这些命名导出：

// javascriptcn.com 代码示例
// named import: a variable
import { PI } from "./module.js";
console.log(PI);

// named import: a function
import { sayHello } from "./module.js";
sayHello("World");

// named import: a class
import { Person } from "./module.js";
const p = new Person("Jack");
p.sayHello();

默认导出

// javascriptcn.com 代码示例
// default export: a variable
export default 3.14;

// default export: a function
export default function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

// default export: a class
export default class Person {
  constructor(name) {
    this.name = name;
  }

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

消费默认导出的方式如下：

// javascriptcn.com 代码示例
// default import: a variable
import PI from "./module.js";
console.log(PI);

// default import: a function
import sayHello from "./module.js";
sayHello("World");

// default import: a class
import Person from "./module.js";
const p = new Person("Jack");
p.sayHello();

需要注意的是，如果一个模块同时有命名导出和默认导出，我们可以将它们同时导出：

// javascriptcn.com 代码示例
// a module with named and default exports
export const PI = 3.14;

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

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

// consuming a module with named and default exports
import Person, { PI } from "./module.js";
console.log(PI);

const p = new Person("Jack");
p.sayHello();

导入

在 ES6 中，我们使用 import 来导入模块。在 ES10 中，我们可以使用动态 import()。这种语法让我们可以在运行时动态地导入模块。

静态导入

// javascriptcn.com 代码示例
// static import: a module
import module from "./module.js";
console.log(module.PI);

// static import: a function
import { sayHello } from "./module.js";
sayHello("World");

// static import: a class
import { Person } from "./module.js";
const p = new Person("Jack");
p.sayHello();

动态导入

动态 import() 语法需要使用一个字符串作为参数，这个字符串就是我们需要导入的模块的位置。动态 import() 返回一个 Promise 对象，该对象将在加载完成后被解析为所导出的模块对象。这种语法让我们可以根据需要动态地加载模块。

// dynamic import
const modulePath = "./module.js";
import(modulePath).then(module => {
  console.log(module.PI);

  const p = new module.Person("Jack");
  p.sayHello();
});

需要注意的是，动态导入只能用于模块导入，不能用于加载普通的脚本文件。

总结

本文是对 ES10 中正确使用 ES6 模块的导入 / 导出的详细探讨。我们介绍了命名导出和默认导出的语法以及如何正确消费它们。我们还介绍了静态导入和动态导入的语法，并且重点强调了动态导入的使用场景。

希望本文能够帮助前端开发者更好地理解 ES10 中的模块化语法，并且在实际项目开发中使用得更加得心应手。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653423847d4982a6eb80d9a0