循环依赖：CommonJS和ES6 Module

最新推荐文章于 2024-04-29 15:03:58 发布

原创最新推荐文章于 2024-04-29 15:03:58 发布 · 717 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #es6

webpack 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了CommonJS和ES6Module在处理循环依赖时的不同之处。在CommonJS中，模块是同步加载的，可能导致部分变量未定义。而在ES6Module中，导入是静态的，导致在循环依赖时可能出现undefined。解决这个问题的一种方法是通过异步调用来确保正确执行顺序。

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