JavaScript | 导入和导出模块

在 JavaScript 中，您可以将代码分解为独立的模块。这些模块可以以不同的方式导入和导出，以满足您的需求。本文将介绍 JS 中导入和导出模块的基础知识。

导出模块

导出模块是将一个值从模块公开以供其他模块使用的过程。导出模块使用 export 关键字，可用于导出以下内容：

单一值

您可以使用 export 关键字导出单个值，该值可以是任何东西，例如字符串、数字、数组、对象等。以下是一个导出字符串值的示例：

// module.js
export const name = 'John';

函数

您可以使用 export 关键字导出单个函数，该函数可以作为方法调用。以下是一个导出函数的示例：

// module.js
export function sayHello(name) {
  console.log(`Hello ${name}`);
}

类

您可以使用 export 关键字导出单个类，该类可以作为实例创建。以下是一个导出类的示例：

// module.js
export class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

多个导出

您可以一次性导出多个值、函数、类等内容。以下是一个导出多个内容的示例：

// module.js
const name = 'John';
function sayHello(name) {
  console.log(`Hello ${name}`);
}
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
export { name, sayHello, Person };

导入模块

导入模块是从其他模块中使用导出的值的过程。导入模块使用 import 关键字，可以导入以下内容：

单一值导入

如果模块导出单一值，则可以使用 import 关键字导入该值。以下是一个导入字符串值的示例：

// app.js
import { name } from './module.js';
console.log(name); // 输出 'John'

多个值导入

如果模块导出多个值，则可以使用 import 关键字导入多个值。以下是一个导入多个值的示例：

// app.js
import { name, sayHello } from './module.js';
console.log(name); // 输出 'John'
sayHello(name); // 输出 'Hello John'

导入所有值

如果模块导出多个值或函数，则可以使用 * as 语法导入模块中的所有值。以下是一个导入所有值的示例：

// app.js
import * as module from './module.js';
console.log(module.name); // 输出 'John'
module.sayHello(module.name); // 输出 'Hello John'
const person = new module.Person('Jack', 25); // 实例化 Person 类
console.log(person.name); // 输出 'Jack'

默认导入

默认导入允许您从其他模块中导入默认值。默认导出通常用于导出单个值、函数或类。导入默认值时，您不需要使用 {} 或 as 关键字。

以下是一个默认导出示例：

// module.js
export default function sayHello(name) {
  console.log(`Hello ${name}`);
}

// app.js
import sayHello from './module.js';
sayHello('John'); // 输出 'Hello John'

结论

该文章介绍了 JavaScript 模块中导入和导出的基础知识。这些工具使您可以创建和管理代码库，以简化和组织代码。上述示例应该帮助您在自己的项目中开始使用导入和导出。