循环依赖：CommonJS和ES6 Module

CommonJS

看一段代码，来了解一下CommonJS是如何处理循环依赖的

//foo.js
const bar =require('./bar.js')
console.log('value of bar:',bar)
module.export = 'This is foo.js'

//bar.js
const foo =require('./foo.js')
console.log('value of foo:',foo)
module.export = 'This is bar.js'

//index.js
require('/foo.js')

输出结果

value of foo:{}
value of bar:This is bar.js

• 通过index.js进入foo中进行执行代码
• foo中第一行加载了bar，停止加载foo，进入bar中执行
• bar中第一行加载foo，foo已经被加载过，跳过此语句
• 输出 value of foo 由于foo没有执行到输出就进入了bar，所以当前输出结果为value of foo:{}
• 执行完bar，返回foo继续执行，输出“value of bar.This is bar.js”

ES6 Module

//foo.js
import bar from './bar.js'
console.log('value of bar:',bar)
export default 'This is foo.js'

//bar.js
 import foo from './foo.js'
console.log('value of foo:',foo)
export default 'This is bar.js'

//index.js
import foo from './foo.js'

输出结果

value of foo:undefined
value of bar:This is bar.js

流程同上，由于CommonJS中本质上导入导出的都是对象所以为空对象。

ES6 Module正确输出

如何使用ES6 Module，正确输入结果

//index.js
import foo from './foo.js'
foo('index.js')

//foo.js
import bar from './bar.js'
function foo(invoker){
console.log(invoker + 'invokes foo.js')
bar('foo.js')
}
export default foo;

//bar.js
import foo from './foo.js'
let invokes = false;
function bar(invoker){
if(!invoked){
	invoked = true;
	console.log(invoker + 'invokes bar.js')
	foo('bar.js')
	}
}
export default bar;

输出结果

index.js invokes foo.js
foo.js invokes bar.js
bar.js invokes foo.js