初识 ECMAScript 2019 新特性 module-JavaScript中文网-JavaScript教程资源分享门户

随着前端开发的不断发展，JavaScript 的发展也日新月异。ECMAScript 2019 引入了一个新的特性——module（模块），它可以帮助我们更好地组织和管理 JavaScript 代码。

什么是 module？

Module 是 ECMAScript 2019 新增的一种语法，用于组织和管理 JavaScript 代码。它可以将一个大的 JavaScript 应用程序划分为多个小的、可重用的部分，每个部分都可以单独加载和使用。这使得代码更加清晰、易于维护和扩展。

在过去，我们通常使用 CommonJS 或 AMD 等模块加载器来实现模块化，但是这些模块加载器存在一些问题，比如不支持静态分析、无法在浏览器环境下运行等。而 module 则是原生支持的模块化方案，可以在浏览器和 Node.js 环境下运行，而且具有更好的性能和安全性。

如何使用 module？

使用 module 非常简单，只需要在 JavaScript 文件的开头添加 import 和 export 语句即可。

导出模块

通过 export 关键字可以将一个变量、函数或类导出为一个模块。例如，我们有一个 utils.js 文件，其中定义了一个 add 函数，我们可以将它导出为一个模块：

// utils.js
export function add(a, b) {
  return a + b;
}

上面的代码中，我们使用 export 将 add 函数导出为一个模块。

导入模块

通过 import 关键字可以导入一个模块中的变量、函数或类。例如，我们在另一个文件中需要使用 add 函数，可以通过 import 导入 utils.js 文件中的 add 函数：

// main.js
import { add } from './utils.js';

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

上面的代码中，我们使用 import 导入了 utils.js 文件中的 add 函数，并在 main.js 文件中使用它。

导出默认模块

除了导出一个或多个变量、函数或类之外，我们还可以通过 export default 关键字导出一个默认模块。例如，我们有一个 logger.js 文件，其中定义了一个 Logger 类，我们可以将它导出为一个默认模块：

// logger.js
export default class Logger {
  log(message) {
    console.log(message);
  }
}

上面的代码中，我们使用 export default 将 Logger 类导出为一个默认模块。

导出默认模块时，我们可以省略模块名称，例如：

// main.js
import Logger from './logger.js';

const logger = new Logger();
logger.log('Hello, world!'); // 输出 "Hello, world!"

上面的代码中，我们使用 import 导入了 logger.js 文件中的默认模块 Logger，并在 main.js 文件中使用它。

module 的指导意义

module 的出现，使得前端开发中的模块化变得更加简单和规范化。它可以帮助我们更好地组织和管理 JavaScript 代码，提高代码的可读性和可维护性。

同时，module 还可以提高代码的性能和安全性。由于 module 是原生支持的模块化方案，它可以通过静态分析来确定依赖关系，从而实现更好的性能。而且，由于 module 可以使用严格模式（"use strict"），可以减少一些潜在的安全问题。

示例代码

下面是一个使用 module 的示例代码：

// www.javascriptcn.com code example
// utils.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js
import { add, subtract } from './utils.js';

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

// logger.js
export default class Logger {
  log(message) {
    console.log(message);
  }
}

// app.js
import Logger from './logger.js';

const logger = new Logger();
logger.log('Hello, world!'); // 输出 "Hello, world!"

上面的代码中，我们定义了三个模块：utils.js、logger.js 和 app.js。其中，utils.js 导出了两个函数，logger.js 导出了一个默认模块 Logger，app.js 导入了 logger.js 中的 Logger 类，并使用它输出一条日志。

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

初识 ECMAScript 2019 新特性 module