来源
在早期 JavaScript 中，我们通常使用 <script> 标签来引入 JavaScript 文件。然而，随着项目的不断扩大，引入的 JavaScript 文件越来越多，这就带来了一些问题：
- 变量污染：由于 JavaScript 文件的作用域都是顶层的，存在变量污染的问题。不同的文件可能会使用相同的变量名，导致命名冲突和意外的变量修改。
- 维护困难：随着文件数量的增加，代码变得难以维护。不同的功能和逻辑可能分散在多个文件中，导致代码分散和可读性差。
- 文件依赖问题：如果不注意文件引入的顺序，可能会导致依赖关系错乱，从而导致代码报错。
为了解决这些问题，JavaScript 社区提出了CommonJS和 ES Modules 两种模块化规范。
CommonJS 是一种模块化规范，被广泛应用于 Node.js 等环境中。它通过使用 require 和 module.exports 来定义和导出模块。每个模块都有自己的作用域，避免了变量污染问题。同时，通过明确的模块依赖关系，可以更好地组织和维护代码。
ES Modules 是 ECMAScript 6（ES6）引入的官方模块化规范，也被称为 ES6 模块。它使用 import 和 export 关键字来导入和导出模块。与 CommonJS 类似，ES Modules 也具有独立的作用域和明确的模块依赖关系。它已成为现代浏览器和 Node.js 中的标准模块化方案。
这两种模块化规范都解决了变量污染、代码维护和文件依赖等问题。通过将代码组织为模块，提高了代码的可读性、可维护性和可复用性。
模块定义:
每个文件都是一个独立的模块，文件中的代码被视为该模块的私有作用域。在一个模块中定义的变量、函数或类默认是私有的，不会被其他模块直接访问。
Commonjs规范
1. 模块的导出
使用module.exports关键词进行导出
代码语言：javascript复制可以导出一个函数,一个变量,一个对象等等
// 定义三个工具函数
function addNum(...args) {
return args.reduce((total, num) => total num, 0);
}
function randomHexColor() {
return `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`
}
function log(message) {
console.log(message);
}
// 使用module.exports 进行导出
module.exports = {
addNum: addNum,
randomHexColor: randomHexColor,
log: log
}
//简写()
module.exports = {
addNum,
randomHexColor,
log
}2. 模块的导入(引入)
使用require关键字 进行导入
支持:
- 用户自定义的js文件
- json格式的文件
- 第三方包
- nodejs内置的模块
// console.log("测试用例");
// 1. 支持导入函数
const {fruit,addNum,randomHexColor,log} = require('./myFunctions/tools')
console.log(addNum(1, 2, 3, 4, 6)); // 16
console.log(randomHexColor()); // #8f6cdc
log(123) // 123
log(fruit)
// 2. json数据
const data = require('./data/data.json')
console.log(data);
// 3.第三方包
const dayjs = require('dayjs')
console.log(dayjs().month() 1);
// 4.内置模块
const http = require('http')
console.log(http)
