ECMAScript Modules规范的示例详解

最新推荐文章于 2025-02-04 19:11:57 发布

原创最新推荐文章于 2025-02-04 19:11:57 发布 · 670 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#ecmascript

本文详细介绍了ECMAScriptModules规范，包括导出变量、函数和类，以及如何导入和使用默认导出。通过示例展示了模块化开发对代码组织和可重用性的提升。

在这里插入图片描述

ECMAScript Modules（ESM）是JavaScript中用于模块化开发的规范，它允许开发者将代码分割成多个独立的文件，以提高代码的可维护性和可重用性。下面是一个ECMAScript Modules规范的示例详解：

创建模块
1.1 导出变量
在一个模块中，可以使用 export 关键字将变量、函数或类导出，使其在其他模块中可用。

javascript

// module1.js
export const message = "Hello, ESM!";

1.2 导出函数
javascript

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

1.3 导出类
javascript

// module3.js
export class Calculator {
  add(a, b) {
    return a + b;
  }
}

导入模块
在另一个模块中，可以使用 import 关键字引入其他模块中导出的变量、函数或类。

2.1 导入变量
javascript

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

console.log(message); // 输出：Hello, ESM!

2.2 导入函数
javascript

// main.js
import { greet } from './module2.js';

const greeting = greet('John');
console.log(greeting); // 输出：Hello, John!

2.3 导入类
javascript

// main.js
import { Calculator } from './module3.js';

const calculator = new Calculator();
console.log(calculator.add(2, 3)); // 输出：5

默认导出
除了具名导出，模块还可以有一个默认导出。一个模块只能有一个默认导出。

3.1 默认导出变量
javascript

// module4.js
const defaultMessage = "Hello, Default ESM!";
export default defaultMessage;

3.2 默认导出函数
javascript

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

3.3 默认导出类
javascript

// module6.js
export default class Greeter {
  greet(name) {
    return `Hello, ${name}!`;
  }
}

导入默认导出
javascript

// main.js
import defaultMessage from './module4.js';
import sayHello from './module5.js';
import Greeter from './module6.js';

console.log(defaultMessage); // 输出：Hello, Default ESM!
console.log(sayHello('Alice')); // 输出：Hello, Alice!
const greeter = new Greeter();
console.log(greeter.greet('Bob')); // 输出：Hello, Bob!

以上示例展示了ECMAScript Modules规范的基本用法，包括模块的创建、导出、导入以及默认导出的使用。使用模块化开发有助于代码的组织和维护，同时提高了代码的可读性和可重用性。