Commonjs和ES6模块化的区别

Commonjs和ES6模块化的区别

Commonjs:主要实践者为Nodejs

1、commonjs模块输出的是值的拷贝，被模块缓存，在另一个模块可以修改赋值，当输出的是基本数据类型的时候，修改时不会影响到相应模块的值，当输出的是引用类型的值时，此时是浅拷贝，共享一个对象的地址，修改时会影响其他相关模块中的值。
2、当使用require命令加载某个模块时，就会运行整个模块的代码。当使用require命令加载同一个模块时，不会再执行该模块，而是取到缓存之中的值。也就是说，Commonjs模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。
3、循环加载时，属于加载时执行。即脚本代码在require的时候，就会全部执行。一旦出现某个模块被"循环加载"，就只输出已经执行的部分，还未执行的部分不会输出。

ES6

1、输出的是动态只读引用， 在import一个模块时，会生成一个只读引用，不能进行修改。当执行需要用到该值时，才会根据只读引用去原模块中取值。如果在原模块中修改值，所有用到该值的模块中的引用值都会修改。
2、循环加载时，ES6模块是动态引用。只要两个模块之间存在某个引用，代码就能够执行。

CommonJS和ES6循环加载

ComminJs：

a.js

exports.done = false;//a的执行状态
 
var b = require('./b.js');
console.log('在a.js中，b.done = %j', b.done);
 
exports.done = true;
console.log('a.js执行完毕！')

b.js

exports.done = false;
 
var a = require('./a.js');
console.log('在b.js中，a.done = %j', a.done);
 
exports.done = true;
console.log('b.js执行完毕！')

main.js

var a = require('./a.js');
var b = require('./b.js');
 
console.log('在main.js中，a.done = %j, b.done = %j', a.done, b.done);

1、main.js中require了a，此时在a中require了b，所以先去执行了b，在b中又require了a，此时a还没有执行完，但是已经开始执行了，不会再次开始执行，所以继续执行b
2、发生循环加载，系统会去a.js模块对应对象的exports属性取值，因为a.js没执行完，从exports属性只能取回已经执行的部分，未执行的部分不返回，所以取回的值并不是最后的值。
3、在b执行完后，继续执行a此时，执行完后，回到main.js此时不会再执行b,直接取，最后输出a模块和b模块中的done值。

此部分参考：https://www.jb51.net/article/153530.htm 原文更详细一些

ES6：

a.js

import {bar} from './b.js';
console.log('a.js');
console.log(bar());
function foo() { return 'foo' }
export {foo};

b.js

import {foo} from './a.js';
console.log('b.js');
console.log(foo());
function bar() { return 'bar' }
export {bar};

html中：

<script src="./a.js" type="module" charset="utf-8"></script>

在a中加载了b.js，去执行b.js，b.js加载了a中的foo，此时由于a中用了函数变量提升，所以可以正常取得，然后再回来执行a.

【注】如果此时a中没有进行变量提升，会造成b中访问不到foo
a.js中改为：

import {bar} from './b.js';
console.log('a.js');
console.log(bar());
var foo=function() { return 'foo' }
export {foo};

此时会报错：