从以上结果和分析过程可以看出，当遇到require命令时，会执行对应的模块代码。当循环引用时，有可能只输出某模块代码的一部分。当引用同一个模块时，不会再次加载，而是获取缓存。
ES6模块
es6模块中的值属于【动态只读引用】。只说明一下复杂数据类型。
对于只读来说，即不允许修改引入变量的值，import的变量是只读的，不论是基本数据类型还是复杂数据类型。当模块遇到import命令时，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。
对于动态来说，原始值发生变化，import加载的值也会发生变化。不论是基本数据类型还是复杂数据类型。
// b.js export let counter = { count: 1 } setTimeout(() => { console.log('b.js-1', counter.count) }, 1000) // a.js import { counter } from './b.js' counter = {} console.log('a.js-1', counter) // Syntax Error: "counter" is read-only
虽然不能将counter重新赋值一个新的对象，但是可以给对象添加属性和方法。此时不会报错。这种行为类型与关键字const的用法。
// a.js import { counter } from './b.js' counter.count++ console.log(counter) // 2
循环加载时，ES6模块是动态引用。只要两个模块之间存在某个引用，代码就能够执行。
// b.js import {foo} from './a.js'; export function bar() { console.log('bar'); if (Math.random() > 0.5) { foo(); } } // a.js import {bar} from './b.js'; export function foo() { console.log('foo'); bar(); console.log('执行完毕'); } foo(); node a.js foo bar 执行完毕 // 执行结果也有可能是 foo bar foo bar 执行完毕 执行完毕
由于在两个模块之间都存在引用。因此能够正常执行。
以上这篇详谈commonjs模块与es6模块的区别就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: