首页 > 网络编程 > JavaScript > javascript技巧 > js中的模块化：import与export

JavaScript中的模块化开发ES6：import与export详解

2025-07-19 09:03:08 作者：代码保安

JavaScript模块化通过ES6的import/export实现,将代码拆分为独立模块,提升可维护性与复用性,支持命名导出、默认导出及混合导出,模块异步加载且只执行一次,需严格模式和正确路径,打包工具如Webpack可优化加载和代码分割

在 JavaScript 中，模块化开发是一种将代码分割为独立、可复用部分的开发方式。ES6（ECMAScript 2015）引入了原生的模块系统（即 import 和 export），使得开发者可以更方便地组织和管理代码。

📌 一、什么是模块化？

模块化是指将一个大型程序拆分为多个功能独立的文件（模块），每个模块负责一部分功能，通过接口暴露和引入的方式进行通信。模块化的好处包括：

提高代码可维护性
便于复用
避免命名冲突
更好的组织代码结构

🧩 二、export 详解

export 用于从模块中导出函数、对象、变量等，供其他模块使用。

1. 命名导出（Named Exports）

// math.js
export const PI = 3.14;

export function add(a, b) {
    return a + b;
}

也可以在导出时使用别名：

export { PI as PI_CONSTANT } from './math.js';

2. 默认导出（Default Export）

一个模块只能有一个默认导出。

// utils.js
export default function() {
    console.log("Hello from default export");
}

3. 同时导出命名和默认

// lib.js
export const name = "Alice";

export default class Person {
    constructor(name) {
        this.name = name;
    }
}

🧩 三、import 详解

import 用于从其他模块导入变量、函数、类等。

1. 导入命名导出

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

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

2. 导入并重命名

import { PI as PI_CONSTANT } from './math.js';

3. 导入整个模块

import * as MathUtils from './math.js';

console.log(MathUtils.PI);
console.log(MathUtils.add(1, 2));

4. 导入默认导出

// utils.js 是默认导出一个函数
import sayHello from './utils.js';

sayHello(); // Hello from default export

5. 同时导入默认和命名导出

import Person, { name } from './lib.js';

console.log(name); // Alice
const p = new Person("Bob");

⚙️ 四、模块加载方式

模块在浏览器中运行时，需要使用 <script type="module">：

<script type="module" src="main.js"></script>

或者内联方式：

<script type="module">
    import { add } from './math.js';
    console.log(add(1, 2));
</script>

🧪 五、注意事项

模块是严格模式：模块默认启用 "use strict"，无需手动声明。
模块代码只执行一次：即使被多个文件导入，也只会执行一次。
模块路径需带扩展名：如 ./math.js，不能省略 .js。
模块是异步加载的：浏览器会异步加载模块，不会阻塞 HTML 解析。

🧠 六、示例：模块化项目结构

project/
│
├── index.html
├── main.js
├── math.js
└── utils.js

math.js

export const PI = 3.14;

export function multiply(a, b) {
    return a * b;
}

utils.js

export default function greet(name) {
    console.log(`Hello, ${name}!`);
}

main.js

import { PI, multiply } from './math.js';
import greet from './utils.js';

console.log("PI:", PI);
console.log("Multiply 3 * 4:", multiply(3, 4));
greet("Alice");

🧰 七、模块打包工具（可选）

虽然原生模块已经很强大，但在实际开发中，我们常使用打包工具来优化模块加载：

Webpack
Rollup
Vite
Parcel

这些工具可以：

自动处理模块路径
支持代码分割
支持 TypeScript、JSX 等扩展
提升加载性能

✅ 总结

特性	说明
`export`	导出变量、函数、类等
`import`	导入模块内容
命名导出	可导出多个值，通过名称导入
默认导出	每个模块只能有一个默认导出
模块执行	只执行一次，多次导入不会重复执行
使用方式	需配合 `<script type="module">` 使用

到此这篇关于JavaScript中的模块化开发ES6：import与export详解的文章就介绍到这了,更多相关js中的模块化：import与export内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！