当前位置:首页 > 文章列表 > 文章 > 前端 > JavaScript模块化是什么?如何使用import和export?

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

2025-07-11 11:27:19 0浏览 收藏

文章不知道大家是否熟悉?今天我将给大家介绍《JavaScript模块化是什么?如何用import和export?》,这篇文章主要会讲到等等知识点,如果你在看完本篇文章后,有更好的建议或者发现哪里有问题,希望大家都能积极评论指出,谢谢!希望我们能一起加油进步!

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

JavaScript的模块化是什么?如何使用import和export?

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

JavaScript的模块化是什么?如何使用import和export?

解决方案

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

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

JavaScript的模块化是什么?如何使用import和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的模块化是什么?如何使用import和export?

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

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