js es6 import

JavaScript ES6 中的 import 关键字用于导入模块中的功能或值。这是 ES6 模块系统的一部分，它提供了一种定义和使用模块的方法，使得代码更加组织化和可维护。

基础概念

• 模块：模块是一组相关的函数、对象和变量，它们被封装在一个文件中，并可以通过 export 关键字导出。
• 导入：使用 import 关键字可以将其他模块中导出的绑定（如变量、函数、类等）引入到当前模块中。

语法

import { export } from "module-name";
// 或者
import * as name from "module-name";
// 或者
import "module-name";

类型

1. 命名导入：允许你导入模块中特定的导出项。
2. 命名导入：允许你导入模块中特定的导出项。
3. 默认导入：每个模块只能有一个默认导出，可以使用任意名称来接收。
4. 默认导入：每个模块只能有一个默认导出，可以使用任意名称来接收。
5. 导入所有：使用星号（*）可以导入模块中的所有导出项，并将它们作为一个对象导入。
6. 导入所有：使用星号（*）可以导入模块中的所有导出项，并将它们作为一个对象导入。
7. 导入并重命名：可以在导入时为导入的绑定指定一个新的名称。
8. 导入并重命名：可以在导入时为导入的绑定指定一个新的名称。

应用场景

• 代码分割：通过模块化，可以将代码分割成多个文件，便于管理和维护。
• 避免全局污染：模块化有助于避免变量名冲突，减少全局变量的使用。
• 按需加载：可以根据需要加载特定的模块，提高应用的性能。

示例代码

假设我们有一个名为 mathFunctions.js 的模块，它导出了几个数学函数：

// mathFunctions.js
export function add(x, y) {
  return x + y;
}

export function subtract(x, y) {
  return x - y;
}

在另一个文件中，我们可以这样导入并使用这些函数：

// app.js
import { add, subtract } from './mathFunctions.js';

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

遇到的问题及解决方法

问题：模块未找到

如果你遇到了 Module not found 的错误，可能是因为以下原因：

• 路径错误：确保导入路径正确无误。
• 文件扩展名：在某些环境中，可能需要包含文件的扩展名（如 .js）。
• 服务器配置：如果是通过 HTTP 服务器访问，确保服务器配置正确，能够提供模块文件。

解决方法：

• 检查并修正导入路径。
• 确保文件扩展名正确。
• 如果是本地开发，可以使用像 webpack 或 parcel 这样的打包工具来处理模块路径。

问题：循环依赖

当两个或多个模块相互依赖时，可能会出现循环依赖的问题。

解决方法：

• 尝试重构代码，消除循环依赖。
• 使用函数或类级别的导入，而不是在文件顶部进行导入。

通过理解 import 关键字的这些基础概念和应用场景，你可以更有效地组织和维护你的 JavaScript 代码。