CJS与ESM：CJS

模块化方案

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

如果我们在一个html文件中，引入脚本，以前是通过script脚本来引入：

这种方式下引入的脚本实际上相当于把所有的代码都放在了全局作用域中，假如a.js和b.js文件中都有name变量，首先会覆盖，其次是let,多次声明同一个变量会报错

这就是相当于在全局作用域中 重复声明与赋值

另外也可以通过立即执行函数将变量的作用域限制在函数内部，然后通过return 返回出去，这个就不多说了，重点说下cjs与esm

CommonJS：
CJS主要用于服务器端文件的导入和导出，我们在一个文件中可以定义变量和函数等，通过module.exports导出，module.exports是一个空对象，给这个对象身上添加属性，或者重新为其赋值为另一个对象，就会将其指向的对象作为导出对象导出出去

// 1.js
console.log(module.exports); //输出 {}

// 1.js
console.log(module.exports);

let name = "aa";
let age = 20;
function sayHi() {
  console.log("hihihi");
}

// 给对象添加属性
module.exports.name = name;
module.exports.age = age;
module.exports.sayHi = sayHi;

console.log(module.exports);
//{ name: 'aa', age: 20, sayHi: [Function: sayHi] }

或者是让module.exports重新指向一个对象：

// 1.js
console.log(module.exports);

let name = "aa";
let age = 20;
function sayHi() {
  console.log("hihihi");
}

module.exports = {
  name,
  age,
  sayHi,
};

console.log(module.exports);
//{ name: 'aa', age: 20, sayHi: [Function: sayHi] }

在另一个文件中通过require()导入：

// 1.js 导出
let name = "aa";
let age = 20;
function sayHi() {
  console.log("hihihi");
}

module.exports = {
  name,
  age,
  sayHi,
};

// 2.js 导入
const m1 = require("./1.js");
console.log(m1); 
//{ name: 'aa', age: 20, sayHi: [Function: sayHi] }

在CJS中，require(“./1.js”) 获取的实际上是，导出对象的地址，就是说，导出对象module.exports和m1变量中保存的地址是一样的，

导出的是原始类型时

假如导出的一个原始类型，即：

// 1.js 导出
let name = "aa";
let age = 20;

module.exports = name


// 2.js 导入
const m1 = require("./1.js");
console.log(m1); //aa

在导入的时候类似于原始类型变量的赋值，在2.js文件中创建了一个变量m1,然后拷贝了1.js中的name变量。
这时候，导出，导入值的改变不会对彼此产生影响，就类似于原始类型数据之间的拷贝，是独立的，互不影响。
举例来说：

// 1.js 导出
let name = "aa";

// 2s以后修改name
setTimeout(() => {
  console.log("2s后在导出文件进行修改");
  name = "hahaha";
}, 2000);

module.exports = name;


// 2.js 导入
const m1 = require("./1.js");
console.log(m1);

// 4s以后输出m1,看下导出文件1.js的修改，有没有对这里产生影响
setTimeout(() => {
  console.log('导入文件中没有影响',m1);
}, 4000);

输出

aa
2s后在导出文件进行修改
导入文件中没有影响 aa

导出的是对象类型时

假设导出的对象是一个对象类型，对象内部的属性有原始类型，也有复杂类型时。

// 1.js 导出
let name = "aa";
let age = 20;
let friends = {
  name: "zs",
  age: 22,
  score: [10, 20, 30],
};

module.exports = {
  name,
  age,
  friends,
};

//修改
setTimeout(() => {
  module.exports.name = "jjj";
  module.exports.friends.age = 100;
}, 2000);


// 2.js 导入
const m1 = require("./1.js");
console.log(m1);

setTimeout(() => {
  console.log(m1);
}, 3000);

输出

{
  name: 'aa',
  age: 20,
  friends: { name: 'zs', age: 22, score: [ 10, 20, 30 ] }
}
{
  name: 'jjj',
  age: 20,
  friends: { name: 'zs', age: 100, score: [ 10, 20, 30 ] }
}

在1.js中，通过module.exports.的形式修改导出的数据时，可以发现导入文件中的数据也改变了，这是因为module.exports和m1,指向的内部地址是一样的，类似于对象的浅拷贝，相互之间会产生影响。

同样，如果在导入文件中修改导出的对象，导出文件中也会受到影响

// 1.js 导出
let name = "aa";
let age = 20;
let friends = {
  name: "zs",
  age: 22,
  score: [10, 20, 30],
};

module.exports = {
  name,
  age,
  friends,
};

setTimeout(() => {
  console.log("导出文件中的源导出数据", module.exports);
}, 3000);



// 2.js 导入
const m1 = require("./1.js");
console.log("初始导入对象", m1);

setTimeout(() => {
  console.log("导入文件中修改导出对象-----");
  m1.name = "2.js";
  console.log("修改完成");
}, 2000);

输出

初始导入对象 {
  name: 'aa',
  age: 20,
  friends: { name: 'zs', age: 22, score: [ 10, 20, 30 ] }
}
导入文件中修改导出对象-----
修改完成
导出文件中的源导出数据 {
  name: '2.js',
  age: 20,
  friends: { name: 'zs', age: 22, score: [ 10, 20, 30 ] }
}

导入的时候使用解构赋值

在导入文件的时候，我们直接解构对象：

const { name, age, friends } = require("./1.js");
console.log("初始导入对象", name, age, friends);

现在的代码含义是，导入1.js中的导出对象，同时我们使用了对象解构，在2.js中也定义了name,age,friends变量，然后他们被赋值为了导出对象中的对应值。
这时候就类似于进行浅拷贝

由于name,age都是原始类型，直接会拷贝一份，如果去修改导出文件的值，导入文件不受影响

// 1.js 导出
let name = "aa";
let age = 20;
let friends = {
  name: "zs",
  age: 22,
  score: [10, 20, 30],
};

module.exports = {
  name,
  age,
  friends,
};

setTimeout(() => {
  module.exports.name = "haha";
  console.log(module.exports);
}, 2000);


// 2.js 导入
const { name, age, friends } = require("./1.js");
console.log("初始导入对象", name, age, friends);

setTimeout(() => {
  console.log(name);
}, 3000);

输出：

初始导入对象 aa 20 { name: 'zs', age: 22, score: [ 10, 20, 30 ] }
{
  name: 'haha',
  age: 20,
  friends: { name: 'zs', age: 22, score: [ 10, 20, 30 ] }
}
aa

而friends是对象类型，如果我们在2.js中修改，也会反映到1.js中：

// 1.js 导出
let name = "aa";
let age = 20;
let friends = {
  name: "zs",
  age: 22,
  score: [10, 20, 30],
};

module.exports = {
  name,
  age,
  friends,
};

setTimeout(() => {
  console.log("导出文件中的源导出数据", module.exports);
}, 3000);


// 2.js 导入
const { name, age, friends } = require("./1.js");
console.log("初始导入对象", name, age, friends);

setTimeout(() => {
  console.log("导入文件中修改导出对象-----");
  friends.age = -1;
  console.log("修改完成");
}, 2000);

输出

初始导入对象 aa 20 { name: 'zs', age: 22, score: [ 10, 20, 30 ] }
导入文件中修改导出对象-----
修改完成
导出文件中的源导出数据 {
  name: 'aa',
  age: 20,
  friends: { name: 'zs', age: -1, score: [ 10, 20, 30 ] }
}

这是因为friends和module.exports.friends实际上指向的地址是一样的。

总结一下，实际上通过require()导入对象时，会执行一次文件，然后返回的是导出对象值的拷贝，如果是基本类型，就是复制了一份，如果是对象类型，就是返回了导出对象module.exports的内存地址。

整体给我的感觉就类似于浅拷贝。

commonjs是在代码运行时加载，因为commonjs是导出的整个对象，需要在脚本运行完成后才能生成
commonjs使用的是同步加载模块方式，require()的文件需要执行一遍。当文件都在服务器端时，就类型于文件都在我们本地，读取和执行都很快。
如果说是浏览器端，浏览器需要向服务器请求这些js文件，还需要下载文件，然后去执行文件，如果文件中引入了其他文件，又需要下载执行，这就会很耗费时间 ，所以在浏览器环境下我们不适用这种模块化方案，采用的是ESModule.