ES6模块的循环加载

先理解JS代码执行的过程。

1.引擎：负责整个JavaScript编译及执行的过程2.编译器：负责语法分析和代码生成3.作用域：负责收集并维护所有声明的标识符组成一系列的查询系统，确定当前执行的代码对标识符的访问权限（根据名称查找变量的一套规则）

CommonJS 模块是运行时加载（运行时执行一次），ES6 模块是编译时输出接口（编译时执行一次）。

看看下面一个循环引用的例子。

main.js

import a from './a';
console.log(a)

a.js

console.log('执行a')
import b from './b' // 开始编译b模块，代码停留在这里
console.log(b)
console.log('导入b之后')  export default '我是a模块'

b.js

console.log('执行b')
import a from './a' // 由于a模块还在编译阶段，代码并没有执行结果
console.log(a) // 变量是undefined
console.log('导入a之后')  export default '我是b模块'

结果

// 编译阶段
b.js:1 执行b
b.js:3 undefined
b.js:4 导入a之后    // 执行阶段
a.js:1 执行a
a.js:3 我是b模块
a.js:4 导入b之后
main.js:2 我是a模块

ES6根本不会关心是否发生了"循环引用"，只是生成一个指向被加载模块的引用，需要开发者自己保证，取值的时候能够取到值。

模块的循环引用本身不会造成代码报错，只是取值的时候可能无法取到值，可以通过一些逻辑判断处理即可。

完

ES6模块的循环加载相关推荐

es6 模块的整体加载
模块的整体加载除了指定加载某个输出值,还可以使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面. 下面是一个circle.js文件,它输出两个方法area和circumfere ...
CommonJS模块的循环加载
当循环调用 require() 时,一个模块可能在未完成执行时被返回. 例如以下情况: // a.js console.log('a 开始'); exports.done = false; const ...
es6 循环加载ES6模块
循环加载ES6模块 "循环加载"(circular dependency)指的是,a脚本的执行依赖b脚本,而b脚本的执行又依赖a脚本. // a.js var b = requir ...
ES6之Module 的加载实现(3)
4.循环加载 "循环加载"(circular dependency)指的是,a脚本的执行依赖b脚本,而b脚本的执行又依赖a脚本通常,"循环加载"表示存在强耦合 ...
webpack4下import()模块按需加载,打包按需切割模块，减少包体积，加快首页请求速度...
一:背景因为项目功能越加越多,打包后的体积越来越大,导致首页展示的时候速度比较慢,因为要等压缩的js的包加载完毕. 首页展示的时候只需要对应的js,并不需要全部的js模块,所以这里就可以用按需加载, ...
mysql_connect() 不支持请检查 mysql 模块是否正确加载
在上面文章的基础上配置PHP环境完成之后发现安装(discuz)论坛时候还是有问题! 函数名称检查结果建议 mysq ...
基于vue的公共looploading组件（vue循环加载--组件）
前些天做的组件,觉得挺有意思,上传到了github上 https://github.com/SwnCowDevil/my-looploading 说明: 一款基于vue的循环加载公共组件, 组件 ...
boost::graph模块使用 read_graphviz 加载 GraphViz Dot 文本的示例，图转换为具有自定义属性的 BGL adjacency_list 图
boost::graph模块使用 read_graphviz 加载 GraphViz Dot 文本的示例 ,图转换为具有自定义属性的 BGL adjacency_list 图实现功能 C++实现代码 ...
Vue本地图片循环加载显示不出来，vue img标签 :src地址拼接
Vue本地图片循环加载显示不出来,vue img标签 :src地址拼接上代码: <img:src="img"alt="banner" /> dat ...

ES6模块的循环加载

ES6模块的循环加载相关推荐

最新文章

热门文章