common.js 教程

CommonJS教程

一、基本概念

CommonJS是一种JavaScript模块规范，旨在创建一个适用于服务器端和客户端的模块系统，在CommonJS中，每个文件都是一个独立的模块，模块之间通过module.exports和require进行交互，这种模块化管理方式可以让代码更结构化，易于理解和维护，同时提高了代码的可重用性，并避免了全局作用域污染。

二、核心特性

1、模块独立性：每个模块拥有自己独立的作用域，变量、函数等对其他模块不可见，除非显式导出。

2、导出与导入：使用module.exports导出模块内容，使用require导入其他模块的内容。

3、缓存机制：模块在首次加载时会被缓存，后续加载相同模块时将直接从缓存中读取，提高性能。

4、循环依赖处理：CommonJS能够处理模块间的循环依赖，但需要注意模块加载顺序和部分加载状态。

三、使用方法

1、导出模块：

使用module.exports导出对象、函数或变量，创建一个math.js文件，导出加法和减法函数：

     // math.js
     const add = (a, b) => a + b;
     const subtract = (a, b) => a b;
     module.exports = { add, subtract };

2、导入模块：

使用require导入其他模块，在app.js文件中导入math.js模块，并使用其导出的函数：

     // app.js
     const math = require('./math');
     console.log(math.add(2, 3)); // 输出: 5
     console.log(math.subtract(5, 2)); // 输出: 3

3、单独导出和导入：

可以单独导出和导入某个函数或变量，创建一个square.js文件，导出求平方的函数：

     // square.js
     module.exports = (x) => x  x;

在另一个文件中导入该函数：

     // app.js
     const square = require('./square');
     console.log(square(5)); // 输出: 25

四、与其他模块系统的比较

1、CommonJS vs ES Modules：

ES Modules（ESM）是JavaScript的标准模块系统，与CommonJS有许多不同之处，如语法不同（ESM使用import和export）、静态解析（ESM在编译时解析模块依赖）、异步加载（ESM支持异步加载，适用于浏览器环境）等。

2、CommonJS vs AMD：

AMD主要用于浏览器环境，支持异步加载模块，与CommonJS相比，AMD的语法更加复杂，但更适合在浏览器中使用。

五、最佳实践

1、合理划分模块：将功能独立的代码分离到不同的模块中，避免模块间的强耦合，提高代码的可维护性和可重用性。

2、避免循环依赖：尽量避免循环依赖，若无法避免，可以通过重构代码、拆分功能模块等方法解决。

3、使用工具：使用工具如eslint、prettier等保持代码风格一致，提高代码质量，对于项目管理，可以使用研发项目管理系统PingCode和通用项目协作软件Worktile，以提高团队协作效率。

4、版本控制：使用版本控制系统如Git管理代码，记录代码历史，方便协作和回滚。

5、文档和注释：编写详细的文档和注释，帮助团队成员理解代码，提高代码的可维护性。

六、FAQs

1、问：CommonJS模块在首次加载后会再次执行吗？

答：不会，CommonJS模块在首次加载时会被缓存，后续加载相同模块时将直接从缓存中读取，而不会再次执行模块代码。

2、问：如何处理CommonJS中的循环依赖问题？

答：当两个或多个模块相互依赖时，就会出现循环依赖，CommonJS能够处理这种情况，但需要注意模块加载顺序和模块的部分加载状态，解决方法通常是重构代码，避免这种相互依赖。