ES6中js文件执行顺序

文章目录

import 和 自写代码执行顺序

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

详细解析过程

  1. 静态分析

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

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

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

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

示例代码

javascript 复制代码
import { funcA } from './moduleA.js';
import { funcB } from './moduleB.js';

funcA();
funcB();

执行顺序

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

总结

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

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

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

  • 插件加载顺序:在 nuxt.config.js 中配置的插件按照顺序加载和初始化。
  • Vue 组件执行顺序:在所有插件加载和初始化完成之后,Vue 组件的生命周期开始执行。
相关推荐
jiangzhihao05152 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI4 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front5 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie5 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀5 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻5 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树6 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔6 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
焚 城6 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
Asthenia04126 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端