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