JavaScript模块化是什么？如何用import和export？

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《JavaScript的模块化是什么？如何使用import和export？》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

JavaScript模块化通过import和export实现代码拆分与复用，解决全局污染问题。1. 每个文件为独立模块，默认变量不可见，需通过export导出功能；2. import用于引入其他模块的功能，支持命名导入、默认导入及整体导入；3. 带来代码隔离、依赖明确、Tree Shaking优化等优势；4. 使用时注意避免默认与命名导出混淆、循环依赖及保持模块单一职责；5. 浏览器原生支持ESM并通过构建工具优化，Node.js则采用CommonJS并逐步支持ESM，存在兼容性差异。

JavaScript的模块化，简单来说，就是将代码拆分成独立、可复用的文件，每个文件都是一个“模块”。通过import和export，这些模块可以相互引用功能，避免全局污染，让项目结构更清晰，代码更容易维护。它让大型项目管理变得可行，也促进了代码的复用和协作。

解决方案

JavaScript的模块化，尤其是在ES6之后，通过import和export关键字，彻底改变了我们组织和管理代码的方式。它不再是过去那种把所有脚本都丢到全局作用域里，或者依赖IIFE（立即执行函数表达式）来模拟私有作用域的笨拙做法了。现在，每个文件都可以被视为一个独立的模块，它拥有自己的作用域，内部的变量和函数默认对外是不可见的。

export关键字的作用就是声明一个模块要“提供”给外部使用的功能。你可以导出变量、函数、类，甚至是一个默认值。

// myModule.js
export const PI = 3.14159; // 命名导出
export function add(a, b) { // 命名导出
  return a + b;
}
export class Calculator { // 命名导出
  constructor() {
    console.log('Calculator initialized');
  }
}

const secret = 'shhh'; // 这个不会被导出，因为没有export

export default function subtract(a, b) { // 默认导出
  return a - b;
}

而import关键字则负责“引入”其他模块导出的功能。它能让你在当前文件中使用其他模块定义的东西。

// main.js
import { PI, add, Calculator } from './myModule.js'; // 导入命名导出
import sub from './myModule.js'; // 导入默认导出，可以任意命名

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

const calc = new Calculator(); // Calculator initialized

console.log(sub(10, 5)); // 5

// 也可以一次性导入所有命名导出，并将其作为模块对象的属性
import * as myModule from './myModule.js';
console.log(myModule.PI); // 3.14159
console.log(myModule.add(5, 5)); // 10
// 注意：默认导出不会被包含在* as myModule中，除非它本身也是一个命名导出

这种机制带来的好处是显而易见的：代码隔离，减少命名冲突；依赖关系明确，易于理解和调试；以及对工具链的友好支持，比如Tree Shaking（摇树优化），只打包实际用到的代码，大大减小最终文件体积。

为什么现代JavaScript开发离不开模块化？

过去，我们写JavaScript，最常见的模式就是把所有代码都堆在一个HTML文件里，或者拆成几个