理解 ECMAScript 2020 中 export 和 import 的使用方法-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2020 中，我们可以使用 export 和 import 关键字来导出和导入模块。在前端开发中，这两个关键字非常重要，因为模块化是现代前端开发中非常重要的一部分。在本文中，我们将学习如何使用 export 和 import 关键字，以及它们的一些使用方法和最佳实践。

export 关键字

export 关键字用于从一个模块中导出一个或多个值。在导出的过程中，我们还可以使用 default 关键字来指定默认导出值。export 关键字可以用来导出任意有效的 ECMAScript 值，例如对象、函数、类等等。使用 export 关键字将值导出后，我们可以在其他模块中使用 import 关键字来导入这些值。

以下是使用 export 关键字的一些例子：

导出单个变量或常量

export const a = 1;
export let b = 2;
export var c = 3;
export const d = { name: "John" };

导出函数和类

// www.javascriptcn.com code example
export function square(x) {
  return x * x;
}

export class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

导出默认值

// www.javascriptcn.com code example
export default function() {
  console.log("This is the default function");
}
export default class {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

import 关键字

import 关键字用于从其他模块中导入一个或多个导出值。当我们在一个模块中使用 import 关键字时，我们必须指定要导入的模块的名称。在导入模块时，我们可以使用 as 关键字来为导入的值指定新的名称。默认情况下，导入的值被认为是只读的，但我们也可以使用 * as 关键字来导入整个模块。

以下是使用 import 关键字的一些例子：

导入单个变量或常量

import { a, b, c } from "./example.js";
console.log(a); // 输出 1
console.log(b); // 输出 2
console.log(c); // 输出 3

导入函数和类

import { square, Person } from "./example.js";
console.log(square(3)); // 输出 9
const john = new Person("John");
john.sayHello(); // 输出 "Hello, my name is John"

导入默认值

import myFunction from "./example.js";
myFunction(); // 输出 "This is the default function"

import MyClass from "./example.js";
const john = new MyClass("John");
john.sayHello(); // 输出 "Hello, my name is John"

使用 import 和 export 最佳实践

以下是一些使用 import 和 export 的最佳实践：

在每个模块中只导出一个默认值。
在导入时使用大括号来明确地指定每个导入的名称，以避免命名冲突和困惑。
在一个模块中最好只导出一个或几个名称。这有助于避免模块中的混乱和维护上的问题。
避免对模块进行重命名或补丁。这会使代码更加难以维护和理解。
在导出时使用 const 或 let 关键字来声明变量，并避免使用 var 关键字。

在模块化的前端开发中，使用 export 和 import 关键字来导出和导入模块是非常必要的。通过合理地使用这两个关键字，我们可以轻松地组织和管理项目代码，并使代码更加易于维护和理解。

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

理解 ECMAScript 2020 中 export 和 import 的使用方法