深入解析CommonJS和ES6模块区别，2024最新前端算法相关面试大全

1、对于基本数据类型，属于复制。即会被模块缓存。同时，在另一个模块可以对该模块输出的变量重新赋值。

2、对于复杂数据类型，属于浅拷贝。由于两个模块引用的对象指向同一个内存空间，因此对该模块的值做修改时会影响另一个模块。

3、当使用require命令加载某个模块时，就会运行整个模块的代码。

4、当使用require命令加载同一个模块时，不会再执行该模块，而是取到缓存之中的值。也就是说，CommonJS模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。

5、循环加载时，属于加载时执行。即脚本代码在require的时候，就会全部执行。一旦出现某个模块被"循环加载"，就只输出已经执行的部分，还未执行的部分不会输出。

ES6模块

---

1、ES6模块中的值属于【动态只读引用】。

2、对于只读来说，即不允许修改引入变量的值，import的变量是只读的，不论是基本数据类型还是复杂数据类型。当模块遇到import命令时，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。

3、对于动态来说，原始值发生变化，import加载的值也会发生变化。不论是基本数据类型还是复杂数据类型。

4、循环加载时，ES6模块是动态引用。只要两个模块之间存在某个引用，代码就能够执行。

二、分析

=======================================================================

CommonJS

---

1、对于基本数据类型，属于复制。即会被模块缓存。同时，在另一个模块可以对该模块输出的变量重新赋值。

b.js

let count = 1;

let plusCount = () => {

count++;

};

setTimeout(() => {

console.log(‘b-1’, count); //2

}, 1000);

setTimeout(() => {

console.log(‘b-2’, count); //2

}, 3000);

module.exports = {

count,

plusCount

};

a.js

let mod = require(‘./b.js’);

console.log(‘a-1’, mod.count); //1

mod.plusCount();

console.log(‘a-2’, mod.count); //1

setTimeout(() => {

console.log(‘a-3’, mod.count); //1

mod.count = 3;

console.log(‘a-4’, mod.count); //3

}, 2000);

以上代码可以看出，b模块export的count变量，是一个复制行为。在plusCount方法调用之后，a模块中的count不受影响。同时，可以在b模块中更改a模块中的值。如果希望能够同步代码，可以export出去一个getter。

// 其他代码相同

module.exports = {

get count () {

return count

},

plusCount

}

3, 4, 5可以使用同一个例子说明

// b.js

exports.done = false

let a = require(‘./a.js’)

console.log(‘b.js-1’, a.done)

exports.done = true

console.log(‘b.js-2’, ‘执行完毕’)

// a.js

exports.done = false

let b = require(‘./b.js’)

console.log(‘a.js-1’, b.done)

exports.done = true

console.log(‘a.js-2’, ‘执行完毕’)

// c.js

let a = require(‘./a.js’)

let b = require(‘./b.js’)

console.log(‘c.js-1’, ‘执行完毕’, a.done, b.done)

node c.js

b.js-1 false

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

对象篇

模块化编程-自研模块加载器

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY4MzU2LWUyNWEzOGRhNTU1NTBmOGY?x-oss-process=image/format,png)

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】