CommonJS规范

简介: CommonJS规范


来源

在早期 JavaScript 中,我们通常使用 <script> 标签来引入 JavaScript 文件。然而,随着项目的不断扩大,引入的 JavaScript 文件越来越多,这就带来了一些问题:

  1. 变量污染:由于 JavaScript 文件的作用域都是顶层的,存在变量污染的问题。不同的文件可能会使用相同的变量名,导致命名冲突和意外的变量修改。
  2. 维护困难:随着文件数量的增加,代码变得难以维护。不同的功能和逻辑可能分散在多个文件中,导致代码分散和可读性差。
  3. 文件依赖问题:如果不注意文件引入的顺序,可能会导致依赖关系错乱,从而导致代码报错。

为了解决这些问题,JavaScript 社区提出了CommonJSES Modules 两种模块化规范。

CommonJS 是一种模块化规范,被广泛应用于 Node.js 等环境中。它通过使用 requiremodule.exports 来定义和导出模块。每个模块都有自己的作用域,避免了变量污染问题。同时,通过明确的模块依赖关系,可以更好地组织和维护代码。

ES Modules 是 ECMAScript 6(ES6)引入的官方模块化规范,也被称为 ES6 模块。它使用 importexport 关键字来导入和导出模块。与 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关键字 进行导入

支持:

  1. 用户自定义的js文件
  2. json格式的文件
  3. 第三方包
  4. 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)


目录
相关文章
|
3月前
|
存储 缓存 JavaScript
什么是CommonJS模块规范
【8月更文挑战第12天】什么是CommonJS模块规范
44 2
|
2月前
|
缓存 JavaScript 前端开发
JavaScript模块化开发:ES6模块与CommonJs的对比与应用
JavaScript模块化开发:ES6模块与CommonJs的对比与应用
33 2
|
3月前
|
JavaScript 前端开发 C++
CommonJS和ES6模块规范有何区别
【8月更文挑战第21天】
50 8
|
3月前
|
缓存 JavaScript 前端开发
|
6月前
|
缓存 JavaScript 前端开发
前端 JS 经典:CommonJs 规范
前端 JS 经典:CommonJs 规范
65 0
|
6月前
|
前端开发 JavaScript
CommonJS 和 ES6 Module:一场模块规范的对决(下)
CommonJS 和 ES6 Module:一场模块规范的对决(下)
CommonJS 和 ES6 Module:一场模块规范的对决(下)
|
6月前
|
JavaScript
JS模块化规范之ES6及UMD
JS模块化规范之ES6及UMD
86 3
|
6月前
|
JavaScript 前端开发
JavaScript高级主题:什么是模块化开发?CommonJS 和 ES6 模块的区别是什么?
JavaScript高级主题:什么是模块化开发?CommonJS 和 ES6 模块的区别是什么?
50 1
|
6月前
|
JavaScript 前端开发 开发者
CommonJS 和 ES6 Module:一场模块规范的对决(上)
CommonJS 和 ES6 Module:一场模块规范的对决(上)
|
6月前
|
JavaScript 前端开发
说说你对ES6模块化的理解?和commonJS的区别?
ES6模块化(也称为ES2015模块化)是ECMAScript 6中引入的一种模块化规范,用于在JavaScript中组织和管理代码。它提供了一种更优雅和强大的方式来定义、引入和导出模块。
84 0