ES6中js文件执行顺序

文章目录

• [import 和 自写代码执行顺序](#import 和 自写代码执行顺序)
• • • 详细解析过程
    • 示例代码
    • 执行顺序
    • 总结
• 补充:Nuxt中插件的加载顺序和vue页面代码的执行顺序

import 和 自写代码执行顺序

ES6是等所有的依赖加载完成之后才会执行自己编写的js语句。

详细解析过程

1. 静态分析：

   • 当JavaScript引擎遇到import语句时，它会对这些语句进行静态分析，构建模块的依赖关系图。
   • 在这个阶段，代码不会被执行，只是解析所有的依赖关系。

2. 模块加载：

   • JavaScript引擎会并行加载所有需要的模块。如果引入了两个模块moduleA和moduleB，那么./moduleA.js 和 ./moduleB.js 会被并行加载。
   • 如果某个模块有依赖其他模块，它们也会被递归地加载。

3. 模块解析：

   • 加载完成后，JavaScript引擎会解析这些模块。这包括解析模块中的import和export语句，确保所有的依赖都已被正确解析。
   • 解析完成后，模块会被初始化，但此时还没有执行模块中的代码。

4. 代码执行：

   • 在所有模块都加载并解析完毕之后，JavaScript引擎才会开始执行自己编写的代码。

示例代码

import { funcA } from './moduleA.js';
import { funcB } from './moduleB.js';

funcA();
funcB();

执行顺序

1. 静态分析和依赖图构建 ：JavaScript引擎首先解析import语句，构建依赖关系图。
2. 模块加载 ：并行加载./moduleA.js和./moduleB.js。
3. 模块解析和初始化 ：解析并初始化moduleA和moduleB，确保所有依赖都已经加载和解析。
4. 执行代码 ：在模块加载和解析完成之后，开始执行你编写的代码，即funcA()和funcB()。

总结

• 模块加载和解析：所有的依赖模块都会先被加载和解析。
• 代码执行：在所有模块加载和解析完成之后，才会执行你编写的代码。

所以，funcA()和funcB()的执行是在所有依赖模块都已经加载和解析完成之后进行的。这样就确保了你在代码中使用的任何导入对象（如funcA和funcB）都是已经正确加载和初始化的。

补充:Nuxt中插件的加载顺序和vue页面代码的执行顺序

• 插件加载顺序：在 nuxt.config.js 中配置的插件按照顺序加载和初始化。
• Vue 组件执行顺序：在所有插件加载和初始化完成之后，Vue 组件的生命周期开始执行。