来源
在早期 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
关键词进行导出
可以导出一个函数,一个变量,一个对象等等
js
// 定义三个工具函数 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内置的模块
js
// 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)