JavaScript 模块 101：import & export 无困惑

Source: Dev.to

随着 JavaScript 项目的增长，管理代码变得比仅仅编写代码更重要。模块提供了一种简单的方法来组织、复用和维护代码，以实现高效的开发。

在本文中我们将讨论：

• 为什么需要模块
• 导出函数或值
• 导入模块
• 默认导出 vs. 命名导出
• 模块化代码的好处

模块

在模块出现之前，JavaScript 没有合适的代码组织方式。所有代码都位于 全局作用域，这常常导致冲突和代码混乱。开发者使用了诸如 全局变量 或 IIFE 之类的技巧来进行管理。

// Global variable (problem: can be overwritten)
var count = 0;
function increment() {
  count++;
}

// IIFE (used to avoid global pollution)
(function () {
  var count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  increment();
})();

这些只是变通办法，并非真正的解决方案。

什么是模块

模块就是一个 拥有自己作用域的独立代码块。它有助于让代码 组织有序、可复用，并且 避免冲突。

JavaScript 支持多种 模块系统。下面我们重点介绍两种最重要的类型。

模块类型

ES6 模块

ES6 模块（ECMAScript 6）是 原生模块，它们让你使用 import 和 export 关键字 组织 代码并 仅共享所需的部分。

导出模块

你可以使用 export 关键字来暴露代码，可以单独导出，也可以成组导出。

// Named exports
export const PI = 3.14;
export function add(a, b) {
  return a + b;
}

// Exporting multiple values as a group
const MULTIPLY = 'multiply';
const SUBTRACT = 'subtract';

export { MULTIPLY, SUBTRACT };

导入模块

// Named imports
import { PI, add } from './math.js';

// Default import
import myFunction from './myFunction.js';

CommonJS 模块

在 ES6 模块出现之前，JavaScript（尤其是在 Node.js 中）使用 CommonJS。它依赖 require 引入代码，使用 module.exports 暴露代码。

使用 CommonJS 导出

const PI = 3.14;
function add(a, b) {
  return a + b;
}

module.exports = { PI, add };

使用 CommonJS 导入

const math = require('./math.js');
console.log(math.add(2, 3)); // Outputs: 5

默认模块（动态导入）

现代 JavaScript 允许使用动态导入仅在实际需要时加载文件。这可以减少初始加载体积并加快大型应用程序的速度。

// math.js (module)
export default function add(a, b) {
  return a + b;
}

// app.js (using it)
import add from './math.js';

console.log(add(2, 3)); // 5

默认导出与命名导出

模块化代码的好处

• 更好的组织 – 保持代码清晰有结构，随着项目规模扩大，阅读和管理更容易。
• 可重用性 – 模块可以在整个应用甚至其他项目中复用，节省时间和精力。
• 避免命名冲突 – 每个模块都有自己的作用域，防止变量名冲突。
• 易于测试 – 更小、独立的模块更容易单独测试，从而提升代码可靠性。

感谢阅读！ 如果您喜欢本文，欢迎继续探索更多相关内容。