CommonJS和ES6模块化-编程入门课：Javascript从入门到实战

当前位置:　首页>> 技术小册>> 编程入门课：Javascript从入门到实战

JavaScript中有两种主要的模块化系统：CommonJS和ES6模块。这些模块系统都被设计用于在不同的JavaScript文件之间共享代码，并且它们的语法和实现方式都有所不同。下面我们将介绍它们的不同之处，并提供一些示例代码来说明它们如何工作。

CommonJS模块

CommonJS是一种在服务器端广泛使用的模块化系统，它定义了一种简单的模块格式，其中每个模块都是一个独立的文件，并且它们的导出和导入是通过module.exports和require()函数实现的。CommonJS模块的主要特点包括：

每个模块都是一个独立的文件，并且有自己的作用域。
模块通过module.exports对象导出它们的公共API。
模块通过require()函数导入其他模块的API。
模块可以是同步或异步加载的。
下面是一个示例，展示了如何使用CommonJS模块导出和导入代码：

假设我们有两个文件：math.js和main.js。math.js文件定义了一个加法函数，main.js文件则使用这个函数进行计算。

math.js:

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

module.exports = { add };
```
在math.js文件中，我们定义了一个函数add并将它作为一个对象module.exports的属性导出。这意味着在其他文件中可以通过require()函数导入这个函数。

main.js:

```
const { add } = require('./math.js');

console.log(add(2, 3)); // Output: 5
```
在main.js文件中，我们通过require()函数导入add函数并使用它计算两个数字的和。注意，我们使用了解构赋值来从导出的对象中获取add函数。

ES6模块

ES6模块是在JavaScript标准化过程中引入的一种新的模块系统，它提供了一种更为简单、一致和可靠的方法来组织代码。ES6模块的主要特点包括：

每个模块都是一个独立的文件，并且有自己的作用域。
模块通过export关键字导出它们的公共API。
模块通过import关键字导入其他模块的API。
模块只能是同步加载的。
下面是一个示例，展示了如何使用ES6模块导出和导入代码：

假设我们有两个文件：math.js和main.js。math.js文件定义了一个加法函数，main.js文件则使用这个函数进行计算。

math.js:

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

```

在math.js文件中，我们使用export关键字导出一个函数add。这意味着在其他文件中可以通过import关键字导入这个函数。

main.js:

```
import { add } from './math.js';

console.log(add(2, 3)); // Output: 5
```
在main.js文件中，我们通过import关键字导入add函数并使用它计算两个数字的和。注意，我们使用了解构赋值来从导出的对象中获取add函数。

区别和总结

在使用CommonJS和ES6模块时，需要注意它们之间的一些重要区别：

CommonJS模块是同步加载的，而ES6模块是异步加载的。这意味着当使用ES6模块时，所有依赖项都必须可用才能执行导入的代码。
CommonJS模块使用module.exports导出，而ES6模块使用export关键字导出。
CommonJS模块使用require()函数导入，而ES6模块使用import关键字导入。
CommonJS模块可以在运行时动态加载，而ES6模块只能在编译时静态加载。
CommonJS模块的导入和导出是值复制的，而ES6模块的导入和导出是绑定复制的。

该分类下的相关小册推荐：

剑指javascript

ES6入门指南

JavaScript面试指南

JavaScript入门与进阶

KnockoutJS入门指南

零基础学JavaScript

web前端开发性能优化实战

深入学习前端重构知识体系

Javascript重点难点实例精讲（一）

javascript设计模式原理与实战

WebSocket入门与案例实战

Flutter核心技术与实战