用ESM模块语法，出入随心

2023-09-27 07:09:47

序章：何谓ESM模块语法？

ESM（EcmaScript Module）模块语法是ES6（EcmaScript 2015）中引入的一项重要特性。它允许JavaScript代码以模块化的方式组织和加载，从而提高了代码的可维护性和可重用性。

在ESM模块语法中，每个模块都是一个独立的文件，包含了特定功能的代码。模块之间通过import和export进行通信和协作。

第一章：初识ESM模块语法

1.1 认识export

export关键字用于将模块中的代码或变量导出，以便其他模块可以访问和使用。

// example.js
export const message = 'Hello, world!';

在上面的代码中，我们使用export关键字导出了一个名为message的常量。其他模块可以通过import关键字导入并使用它。

1.2 邂逅import

import关键字用于将其他模块导出的代码或变量导入到当前模块中。

// main.js
import { message } from './example.js';

console.log(message); // 输出: Hello, world!

在上面的代码中，我们使用了import关键字导入了example.js模块导出的message常量，并将其输出到控制台。

1.3 模块的默认导出

除了使用export关键字导出代码或变量之外，ESM模块语法还支持默认导出。默认导出只允许一个，通常用于导出一个模块的主要功能或类。

// example.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

在上面的代码中，我们使用了export default关键字导出了一个名为greet的函数。其他模块可以通过import关键字导入并使用它。

// main.js
import greet from './example.js';

console.log(greet('John')); // 输出: Hello, John!

在上面的代码中，我们使用了import关键字导入了example.js模块导出的greet函数，并将其输出到控制台。

第二章：深入ESM模块语法

2.1 动态导入

ESM模块语法还支持动态导入，这允许在运行时加载模块。

// main.js
const loadModule = async () => {
  const module = await import('./example.js');
  console.log(module.message); // 输出: Hello, world!
};

loadModule();

在上面的代码中，我们使用了async/await语法来动态加载example.js模块。在加载完成后，我们就可以访问该模块导出的message常量。

2.2 模块热更新

ESM模块语法还支持模块热更新，这允许在不刷新页面的情况下更新模块。

// example.js
export const message = 'Hello, world!';

// main.js
import { message } from './example.js';

console.log(message); // 输出: Hello, world!

// 更新example.js模块
export const message = 'Hello, universe!';

// 输出: Hello, universe!
console.log(message);

在上面的代码中，我们先加载了example.js模块，并输出了message常量。然后，我们更新了example.js模块中的message常量。最后，我们再次输出message常量，可以看到它已经被更新了。

第三章：活用ESM模块语法

3.1 代码组织

ESM模块语法可以帮助我们更好地组织代码，使代码更易于维护和重用。

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

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

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

在上面的代码中，我们创建了一个utils.js模块，其中包含了两个函数add和subtract。然后，我们在main.js模块中导入了这两个函数，并使用了它们。这样，我们就可以在main.js模块中使用utils.js模块提供的功能，而无需将这些功能复制到main.js模块中。

3.2 代码重用

ESM模块语法还可以帮助我们重用代码。我们可以将常用的代码提取到一个模块中，然后在其他模块中导入和使用它。

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// geometry.js
import { add, subtract } from './math.js';

export const areaOfRectangle = (width, height) => add(width, height);
export const areaOfCircle = (radius) => Math.PI * radius ** 2;

// main.js
import { areaOfRectangle, areaOfCircle } from './geometry.js';

console.log(areaOfRectangle(2, 3)); // 输出: 6
console.log(areaOfCircle(5)); // 输出: 78.53981633974483