js export 怎么用

JavaScript 中的 export 关键字用于将函数、对象或原始值导出为模块的一部分，以便其他模块可以通过 import 语句使用它们。这是 ES6 模块系统的一部分，它提供了一种定义和使用模块的标准方法。

基础概念

• 默认导出（Default Export）：每个模块只能有一个默认导出。可以使用 export default 关键字导出一个值。
• 命名导出（Named Export）：可以导出多个值，每个值都有一个名称。使用 export 关键字后跟变量、函数或类的声明。

优势

1. 代码复用：通过模块化，可以重用代码而无需复制粘贴。
2. 维护性：将代码分割成多个模块可以提高代码的可维护性。
3. 命名空间：避免了全局作用域的污染。
4. 静态分析：编译器和工具可以对模块进行静态分析，提高性能和优化机会。

类型

• 默认导出：每个模块只能有一个。
• 命名导出：可以有多个。

应用场景

• 库和框架开发：将功能分割成独立的模块，便于管理和使用。
• 大型项目：将代码分割成多个文件，每个文件负责一部分功能。
• 组件化开发：在 React 或 Vue.js 这样的框架中，通常会将组件导出以便复用。

示例代码

默认导出

// mathFunctions.js
const add = (x, y) => x + y;
const subtract = (x, y) => x - y;

export default {
  add,
  subtract
};

然后在另一个文件中导入：

// app.js
import mathFunctions from './mathFunctions.js';

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

命名导出

// mathFunctions.js
export const add = (x, y) => x + y;
export const subtract = (x, y) => x - y;

然后在另一个文件中导入：

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

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

遇到的问题及解决方法

问题：无法正确导入模块

原因：可能是路径错误、文件扩展名未指定或模块系统不兼容。

解决方法：

• 确保文件路径正确。
• 如果使用的是 .mjs 文件或设置了 "type": "module" 在 package.json 中，则需要包含文件扩展名。
• 确保浏览器或 Node.js 版本支持 ES6 模块。

问题：命名导出和默认导出混用时的混淆

原因：可能是因为不清楚如何同时使用命名导出和默认导出。

解决方法：

• 在导入时，使用花括号 {} 来导入命名导出，不要加 default 关键字。
• 默认导出可以直接导入，不需要花括号。

// 导出
export const namedExport = 'named';
export default 'default';

// 导入
import defaultExport, { namedExport } from './module.js';
console.log(defaultExport); // 输出: 'default'
console.log(namedExport); // 输出: 'named'

通过这种方式，可以清晰地区分和使用默认导出与命名导出。