前言
传统的 JavaScript 代码都是基于全局作用域的，但是这种方式很容易导致命名冲突和代码不易维护。为了解决这些问题，ES6（ECMAScript 6）提出了一套新的模块化语法，为 JavaScript 代码的组织提供了一种更加现代的方式。但是，ES6 的模块化语法不同于传统的 CommonJS，本文将会介绍二者之间的区别。
ES6 模块化语法
ES6 的模块系统中，每个模块都是一个独立的文件，每个文件都是一个模块。ES6 模块的定义通过 export 和 import 两个关键字来实现。
export
export 关键字用于将模块中的某个成员（变量、函数、类等）导出到其他模块中使用。
例如，以下代码中，我们将模块中的 sum 函数导出：
-- ------ ------ -------- ------ -- - ------ - - -- -
import
import 关键字用于导入其他模块中的成员，以便在当前模块中使用。
例如，以下代码中，我们导入了名为 sum 的变量，该变量指向 sum.js 文件中导出的 sum 函数：
-- ------- ------ - --- - ---- ----------- ------------------ ---- -- -
ES6 还提供了一些其他的 import 操作，例如 import * 语法可以导入模块中所有的成员。
CommonJS 模块化语法
CommonJS 是 Node.js 中的一套模块化规范。和 ES6 不同，CommonJS 并不直接支持浏览器端的 JavaScript 程序。
exports
在 CommonJS 中，可以使用 exports 对象导出模块中的成员。在一个模块中，可以通过 exports 对象来将需要导出的成员指定为 exports 对象的属性。
例如，以下代码中，我们将模块中的 sum 函数导出：
-- ------ ----------- - ----------- -- - ------ - - -- --
require
在 CommonJS 中，可以使用 require 函数来导入其他模块中的导出成员，以便在当前模块中使用。
例如，以下代码中，我们使用 require 函数导入名为 sum 的变量，该变量指向 sum.js 文件中导出的 sum 函数：
-- ------- ----- --- - -------------------- ------------------ ---- -- -
区别
ES6 和 CommonJS 的模块化语法之间主要有三个区别：
1. ES6 模块化语法是静态的，而 CommonJS 是动态的
ES6 的 import 语句是静态分析的，意味着它必须出现在源代码的顶层，并且不能在其他分支结构中使用。这使得编译器能够正确地确定代码中导入的项，并在编译时确定导入的成员。
而 CommonJS 中的 require 函数是动态加载的，这意味着当代码运行到 require 语句时，才会真正地加载导出的代码，并且它可以在任何代码块中使用。这种方式的缺点是，在浏览器中会导致额外的网络请求和更长的加载时间。
2. ES6 模块化语法是只读的，默认使用严格模式，而 CommonJS 是可变的，不使用严格模式
ES6 中的模块化导入和导出的变量和对象是只读的。这样做的好处是，模块之间的交互封装更加严格，代码变得更加可预测。ES6 还默认使用严格模式进行代码的处理，这意味着变量需要声明后再使用。
而 CommonJS 模块中的导出和引入是可变的，这意味着另一个模块可以修改导入的对象或变量。这种方式可能会导致代码不易维护。CommonJS 还不支持使用严格模式。
3. ES6 模块化语法是基于值的，而 CommonJS 是基于引用的
ES6 导入的模块会被执行一次，并且导出的成员会被保存在内存中，这意味着不管多少次 import 语句被执行，都只有一个实例的导出成员。这种方式使得 ES6 模块化语法更加适合处理状态和单例对象等问题。
而 CommonJS 导入的模块是每次引用时都会加载一次，导出的成员则是通过引用传递的对象，导致多个实例拥有相同的状态，这使得 CommonJS 更加适合处理函数和工具库等问题。
总结
本文介绍了 ES6 和 CommonJS 之间的区别。ES6 的模块化语法提供了更加现代化的方式来组织 JavaScript 代码，并且有一些更严格的限制，这使得代码更加可预测和可维护。CommonJS 具有更加动态的特性，并且更加适合处理函数和工具库等问题。开发者可以根据项目需求来选择合适的模块化方案。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64ddd1b4f6b2d6eab39147a1