深入剖析 CommonJs 和 ES6 模块调用策略之异同

CommonJs：require vs. ES6：import

CommonJs 和 ES6 在加载模块时采用的策略截然不同，前者使用 require 函数，而后者则使用 import 。理解这些差异有助于您在编写代码时做出更适合的选择。

require ：CommonJs 模块采用同步加载方式，这意味着在执行 require 语句时，JavaScript 引擎将暂停脚本的执行，等待所需的模块加载完毕。require 返回的是模块导出的值，如果模块导出的是对象，则会返回该对象的引用。

import ：ES6 模块采用异步加载方式，这意味着在执行 import 语句时，JavaScript 引擎将继续执行脚本，而不等待模块加载完毕。import 返回的是一个 Promise 对象，该对象表示模块加载的状态。当模块加载完成后，Promise 对象将被解析，并返回模块导出的值。如果模块导出的是对象，则会返回该对象的引用。

值 vs. 引用：传递与共享

CommonJs 和 ES6 模块在传递和共享值方面也有着本质的区别。

值传递 ：CommonJs 模块在传递变量时采用值传递的方式，这意味着传递的是变量的副本，而不是变量本身。因此，在模块内部对副本进行修改，不会影响模块外部的变量。

引用传递 ：ES6 模块在传递变量时采用引用传递的方式，这意味着传递的是变量的引用，而不是变量本身。因此，在模块内部对变量进行修改，也会影响模块外部的变量。

循环调用：谁会变化？

在循环调用中，CommonJs 和 ES6 模块的差异尤为明显。

CommonJs ：CommonJs 模块采用值传递的方式，因此在循环调用中，每个模块都会收到一个新的值副本。这意味着，在每个模块内部对变量进行修改，都不会影响其他模块中的变量。

ES6 ：ES6 模块采用引用传递的方式，因此在循环调用中，所有模块共享同一个变量引用。这意味着，在任何模块中对变量进行修改，都会影响其他模块中的变量。

优劣权衡：各有千秋

CommonJs 和 ES6 模块各有优劣，在不同的场景下，选择合适的模块调用策略非常重要。

CommonJs ：CommonJs 模块的优点是简单易用，并且可以更好地控制模块的加载顺序。缺点是，CommonJs 模块采用同步加载方式，可能会阻塞脚本的执行。

ES6 ：ES6 模块的优点是采用异步加载方式，不会阻塞脚本的执行。缺点是，ES6 模块的语法更复杂，并且在循环调用中可能会出现意外的问题。

结语

CommonJs 和 ES6 模块在加载模块、传递变量和循环调用等方面存在着本质的区别。在 JavaScript 开发中，根据具体情况选择合适的模块调用策略非常重要。CommonJs 模块简单易用，但可能会阻塞脚本的执行；ES6 模块采用异步加载方式，但语法更复杂，并且在循环调用中可能会出现意外的问题。