CJS 和 ESM：两种JavaScript模块化方案

CJS 与 ESM

    JavaScript 在诞生之初，只是一种脚本语言，主要用来做一些简单的表单验证等操作。随着 JavaScript 的发展壮大，它逐渐被用于构建复杂的 Web 应用程序，并出现了模块化的需求。

    在 JavaScript 模块化之初，出现了多种不同的模块化方案，其中比较流行的有 CommonJS (CJS) 和 ECMAScript 模块 (ESM)。CJS 是 Node.js 的默认模块化方案，而 ESM 是浏览器环境的默认模块化方案。

    ## CJS

    CJS 是一个同步的模块化方案，它使用 `require()` 函数来加载模块。在 CJS 中，模块是一个独立的文件，它可以导出变量、函数、类等。当一个模块被加载时，它的导出内容会被赋值给一个局部变量。

    CJS 的优点在于它简单易用，而且它支持循环依赖。循环依赖是指一个模块直接或间接地依赖于它自己。在 CJS 中，循环依赖是允许的，但它可能会导致死锁。

    CJS 的缺点在于它是一个同步的模块化方案，这意味着它会阻塞后续代码的执行。当一个模块被加载时，它会立即执行，并且它会阻塞后续代码的执行，直到它完成执行。

    ## ESM

    ESM 是一个异步的模块化方案，它使用 `import` 语句来加载模块。在 ESM 中，模块也是一个独立的文件，它可以导出变量、函数、类等。当一个模块被加载时，它的导出内容会被赋值给一个局部变量，但不会立即执行。

    ESM 的优点在于它是一个异步的模块化方案，这意味着它不会阻塞后续代码的执行。当一个模块被加载时，它会立即返回一个 Promise 对象，后续代码可以继续执行，而不需要等待模块加载完成。

    ESM 的缺点在于它不支持循环依赖。循环依赖是指一个模块直接或间接地依赖于它自己。在 ESM 中，循环依赖是不允许的，它会导致错误。

    ## 对比

    | 特性 | CJS | ESM |
    |---|---|---|
    | 模块化方案 | 同步 | 异步 |
    | 加载模块 | `require()` 函数 | `import` 语句 |
    | 循环依赖 | 允许 | 不允许 |
    | 浏览器支持 | 不支持 | 支持 |
    | Node.js 支持 | 支持 | 不支持 |

    ## 适用场景

    CJS 和 ESM 都有各自的适用场景。CJS 适用于 Node.js 环境，而 ESM 适用于浏览器环境。

    在 Node.js 环境中，CJS 是默认的模块化方案。它简单易用，而且它支持循环依赖。因此，它非常适合用于构建 Node.js 应用程序。

    在浏览器环境中，ESM 是默认的模块化方案。它是一个异步的模块化方案，它不会阻塞后续代码的执行。因此，它非常适合用于构建浏览器应用程序。

    ## 总结

    CJS 和 ESM 都是流行的 JavaScript 模块化方案，它们分别适用于 Node.js 和浏览器环境。CJS 是一个同步的模块化方案，它简单易用，而且它支持循环依赖。ESM 是一个异步的模块化方案，它不会阻塞后续代码的执行，但它不支持循环依赖。