如何优雅地使用 ECMAScript 2020 的 ES module 特性-JavaScript中文网-JavaScript教程资源分享门户

随着 ECMAScript 2020 的发布，ES module 成为了一个非常流行的特性。此特性使得开发者可以更加优雅地组织自己的代码，使其更易于理解和扩展。本篇文章将介绍ES module 的工作原理，如何使用 ES module，如何从一个简单的代码文件开始，逐步将其转换为一个使用 ES module 的结构。

ES module 工作原理

ES module 是一种用于组织 JavaScript 代码的选择性标准。在标准的实现中，每个文件都被视为一个独立的模块，并且通过特殊的导出和导入语法实现声明和访问功能。这里，我们将重点关注两个术语 "导出" 和 "导入"。

导出

导出是 ES module 模块之间的通信方式，它定义了一个模块中其他模块可以访问的内容（例如函数、变量）。ES module 通过 export 关键字将标识符 (identifier) 暴露给其他模块。

// export a variable
export const name = 'Tom';
// export a function
export function sum(num1, num2) {
  return num1 + num2;
}

导入

导入是 ES module 模块之间的另一种通信方式，它允许模块中的代码访问其他模块中导出的标识符。你可以使用 import 关键字从一个模块获取导出的标识符。

import { name } from './module1.js';
import { sum } from './module1.js'

console.log(name); // 'Tom'
console.log(sum(1, 1)); // 2

如何使用 ES module

ES module 的语法是标准化的，并内置在现代浏览器和 Node.js 模块系统中。可以使用以下语法在你的 JavaScript 代码中使用 ES module：

导出

ES module 支持两种导出方式。

命名导出

通过 'export' 关键字将一个变量、函数或类导出。

export const name = 'Tom';
export function sum(num1, num2) {
  return num1 + num2;
}

我们可以导出多个标识符。

const name = 'Tom';
function sum(num1, num2) {
  return num1 + num2;
}
export { name, sum };

默认导出

ES module 还支持默认导出。通过 default 关键字导出一个标识符。每个模块仅能导出一个默认值。

export default function sum(num1, num2) {
  return num1 + num2;
}

导入

使用 ES module 时，我们需要从其他模块 import 我们想要的标识符。

命名导入

在导入时指定我们需要导入哪些命名标识符，以 'import' 关键字开始。

import { size } from './module_s.js';

默认导入

除了导入标识符，你还可以使用 default 关键字一次性导入默认值。

import sayHello from './module_s.js';

sayHello();

导入和导出限制

在导出时，我们不能使用 let 或 const 修饰符，只能导出 var。在导入时，我们必须将导入语句放在代码顶部。

从一个简单的代码文件开始

让我们从一个简单的代码文件开始，将其转换为使用 ES module 的文件结构。

var name = 'Tom';
function sayHello() {
    console.log('Hello', name);
}
sayHello();

我们需要做以下修改。

定义导出

将name和sayHello()函数声明为导出变量。例如：

export var name = 'Tom';
export function sayHello() {
    console.log('Hello', name);
}

或者(一次性挂载多个导出)：

var name = 'Tom';
function sayHello() {
  console.log('Hello', name);
}
export { name, sayHello };

使用导入

在现有代码所在的位置或引用该代码的位置导入变量或函数。例如：

import { name, sayHello } from './module.js';

或者使用默认导出方式：

import sayHello from './module.js';

总结

ES module 是一个非常重要的特性，可以改变我们组织 JavaScript 代码的方式。使用ES module可以更好的组织你的代码，使其更易于理解和扩展。现代工具和浏览器都已经支持ES module，以上是一些基本的用例。我们希望这篇文章可以帮助你更好地学习和使用ES module。

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