ES6 Module的导入导出原理

249 阅读1分钟

一、当模块A被模块B引入时,当A模块在全局中第一次导入时,则进入A模块执行代码,否则直接执行B模块后面的代码。

二、当一个模块在没执行完就被其他模块引用时,该模块默认为undefined。

以下面的例子给大家举个例子,仅表示个人理解,如果有不对的地方,还请大神指教哈!

index.js

foo.js

bar.js

执行顺序详细解读:

首先从入口文件index.js开始

=> foo.js被导入,因为foo.js是第一次被导入,所以,先进入foo.js文件

=> bar.js被导入,因为bar.js是第一次被导入,所以,先进入bar.js文件

=> 因为foo.js 文件已经被导入过,所以bar.js文件的代码直接往下执行,这是有foo文件还没执行完,所以foo为undefined,执行 console.log('value of foo:', foo); 这行代码 接着往下执行,直到导出bar模块

=> 接着就会进入foo.js文件执行代码(至于为什么进入foo.js,是因为foo.js中调用了bar模块,执行bar.js文件的上一步就是执行foo.js)

=> 进入foo.js后往下执行,执行console.log('value of bar:', bar); 这行代码 输出bar是一个函数,然后初始化foo函数完成,最终导出foo

=> 然后再次进入了index.js(进入这个文件的原因同上面),执行foo('index.js');

=> 再次进入foo.js,执行foo函数,执行console.log(invoker + 'invoker foo.js'); 这行代码

=> 执行bar('foo.js');这行代码

=> 再次进入bar.js中调用bar函数,执行 console.log(invoker + 'invoker bar.js'); 这行代码

=> 执行完毕。(不知道到最后foo.js中的bar('foo.js');为什么没有继续执行)

最终结果: