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

柏芮欣

在 JavaScript 中，模块化开发是一种将代码分割为独立、可复用部分的开发方式。ES6（ECMAScript 2015）引入了原生的模块系统（即

1. import

复制代码

和

1. export

复制代码

），使得开发者可以更方便地组织和管理代码。

📌 一、什么是模块化？

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

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

🧩 二、export 详解

1. export

复制代码

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

1. 命名导出（Named Exports）

1. // math.js
   
2. export const PI = 3.14;
   
3. 
   
4. export function add(a, b) {
   
5.     return a + b;
   
6. }

复制代码

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

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

复制代码

2. 默认导出（Default Export）

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

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

复制代码

3. 同时导出命名和默认

1. // lib.js
   
2. export const name = "Alice";
   
3. 
   
4. export default class Person {
   
5.     constructor(name) {
   
6.         this.name = name;
   
7.     }
   
8. }

复制代码

🧩 三、import 详解

1. import

复制代码

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

1. 导入命名导出

1. // main.js
   
2. import { PI, add } from './math.js';
   
3. 
   
4. console.log(PI); // 3.14
   
5. console.log(add(2, 3)); // 5

复制代码

2. 导入并重命名

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

复制代码

3. 导入整个模块

1. import * as MathUtils from './math.js';
   
2. 
   
3. console.log(MathUtils.PI);
   
4. console.log(MathUtils.add(1, 2));

复制代码

4. 导入默认导出

1. // utils.js 是默认导出一个函数
   
2. import sayHello from './utils.js';
   
3. 
   
4. sayHello(); // Hello from default export

复制代码

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

1. import Person, { name } from './lib.js';
   
2. 
   
3. console.log(name); // Alice
   
4. const p = new Person("Bob");

复制代码

⚙️ 四、模块加载方式

模块在浏览器中运行时，需要使用

1. <script type="module">

复制代码

：

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

复制代码

或者内联方式：

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

复制代码

🧪 五、注意事项

• 模块是严格模式：模块默认启用
  1. "use strict"

  复制代码
  ，无需手动声明。
  
• 模块代码只执行一次：即使被多个文件导入，也只会执行一次。
  
• 模块路径需带扩展名：如
  1. ./math.js

  复制代码
  ，不能省略
  1. .js

  复制代码
  。
  
• 模块是异步加载的：浏览器会异步加载模块，不会阻塞 HTML 解析。
  

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

1. project/
   
2. │
   
3. ├── index.html
   
4. ├── main.js
   
5. ├── math.js
   
6. └── utils.js

复制代码

math.js

1. export const PI = 3.14;
   
2. 
   
3. export function multiply(a, b) {
   
4.     return a * b;
   
5. }

复制代码

utils.js

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

复制代码

main.js

1. import { PI, multiply } from './math.js';
   
2. import greet from './utils.js';
   
3. 
   
4. console.log("PI:", PI);
   
5. console.log("Multiply 3 * 4:", multiply(3, 4));
   
6. greet("Alice");

复制代码

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

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

• Webpack
  
• Rollup
  
• Vite
  
• Parcel
  

这些工具可以：

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

✅ 总结

特性说明

1. export

复制代码

导出变量、函数、类等

1. import

复制代码

导入模块内容命名导出可导出多个值，通过名称导入默认导出每个模块只能有一个默认导出模块执行只执行一次，多次导入不会重复执行使用方式需配合

1. <script type="module">

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

酱油的2017

感谢楼主分享。