javascript import 语法详解及经典案例70

前言在 JavaScript 中，import 语句用于从其他模块导入函数、变量、类和其他值。它允许我们组织我们的代码并从不同的文件或模块中重用代码，从而提高代码的可维护性和模块化。

基本语法import 语句的基本语法如下：
```javascript
import from "";
import * as from "";
import { , ... } from "";
import , { , ... } from "";
```
其中：
* ``：要导入的默认导出的名称。
* ``：要导入整个模块并分配给一个命名空间的名称。
* ``：要从模块中导入的特定导出的名称。
* ``：要导入的模块的路径，可以是相对路径或绝对路径。

import 语句类型

默认导出

默认导出是一种特殊类型的导出，用于导出一个模块中的主要值。它可以使用默认导入语句导入。
```javascript
//
export default { name: "John" };
//
import user from "./";
(); // John
```

命名导出

命名导出用于导出模块中的特定值，可以使用命名导入语句导入。
```javascript
//
export const name = "John";
export function greet() { ("Hello!"); }
//
import { name, greet } from "./";
(name); // John
greet(); // Hello!
```

命名空间导出

命名空间导出用于导出整个模块，并将其分配给一个指定的命名空间。
```javascript
//
export const name = "John";
export function greet() { ("Hello!"); }
//
import * as module from "./";
(); // John
(); // Hello!
```

混合导出

import 语句还可以同时导入默认导出和命名导出。
```javascript
//
export default { name: "John" };
export const age = 30;
//
import user, { age } from "./";
(); // John
(age); // 30
```

经典案例

模块化应用

import 语句广泛用于模块化应用，将代码组织成可重用的模块。每个模块可以包含特定的功能或组件，并通过 import 语句导入到主应用程序中。

代码库和第三方库

import 语句还可以用于从代码库和第三方库中导入代码。这样可以轻松地重用经过良好测试和维护的代码，从而节省时间和精力。

动态导入

ES2020 引入了动态导入，允许在运行时动态导入模块。这对于仅在需要时加载大型模块或实现懒加载很有用。
```javascript
const module = await import("./");
(); // John
```

注意事项* import 语句必须在脚本的顶部，不能放在条件语句或循环中。
* 导入的模块必须存在，否则会抛出错误。
* 重复导入同一个模块不会产生任何副作用，模块只会加载一次。
* 使用命名空间导出时，命名空间名称不能与其他全局变量或对象冲突。

import 语句是 JavaScript 中一个强大的工具，用于导入值和模块。它支持多种导入类型，包括默认导出、命名导出和命名空间导出。通过使用 import 语句，我们可以组织我们的代码并从不同的文件或模块中重用代码，从而提高代码的可维护性和模块化。

2025-01-13

---

上一篇：JavaScript 进阶：全面剖析函数式编程

下一篇：JavaScript 响应最佳实践