什么是CMJ和ESM,它们的特点和区别是什么?

121 阅读1分钟

1.CMJ:全称CommonJS

(1)用来规范node环境中的js文件,定义了在服务器端如何组织和管理JavaScript代码

(2)在这个规范中,所有的JavaScript文件都被视为模块,都有自己的作用域

(3)每个模块中的全局变量和函数都不会对其他模块产生污染

(4)它需要使用module.exports进行导出。需要使用require进行导入,并且导入路径必须使用相对路径。

(5)模块还具有缓存机制,一旦模块被运行过一次,其导出结果会被缓存,后续再次使用该模块时,会直接使用缓存的结果。

(6)没有window只有global

运行命令:node a.js

//a.js
var a = "6666";
var bModule = require("./b.js");
function test() {
  console.log(a); //6666
}
test();
console.log(bModule.a); //8888
var a = "8888";

module.exports = {
  a,
};

2.ESM:全称ECMAScript Modules

(1)用来规范管理前端代码,被现代的浏览器所支持。

(2)模块通过import和export语句来导入和导出功能

(3)每个模块中的全局变量和函数都不会对其他模块产生污染

(4)模块中定义的变量不会挂载在window下面

//moduleA.js 文件
// 使用let和const来声明变量和常量,避免使用var  
let localVariableA = 'I am a local variable in module A';  
const constantA = 42;  
  
// 导出函数  
export function functionA() {  
  console.log('Function A executed');  
}  
  
// 命名导出变量  
export { localVariableA as variableA };
//moduleB.js 文件

// 导入moduleA中的函数和变量  
import { functionA, variableA } from './moduleA.js';  
  
// 在moduleB中,我们可以直接使用导入的函数和变量,而不需要担心全局变量污染  
functionB() {  
  console.log('Function B executed');  
  functionA(); // 调用moduleA中的函数  
  console.log(variableA); // 使用moduleA中导出的变量  
}  
  
// 注意:moduleB中没有定义任何全局变量,它只使用了从moduleA导入的内容