CommonJS规范

心安事随

发布于 2024-07-29 16:52:00

910

发布于 2024-07-29 16:52:00

文章被收录于专栏：前端大合集

来源

在早期 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关键词进行导出

可以导出一个函数,一个变量,一个对象等等

 // 定义三个工具函数 
 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)

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-07-29，如有侵权请联系 cloudcommunity@tencent.com 删除

commonjs