关于ES6的module的循环加载
时间:2019-04-19
本文章向大家介绍关于ES6的module的循环加载,主要包括关于ES6的module的循环加载使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
今天写js时,碰到了一个模块循环加载的错误,下面时例子:
// testa.mjs import testb from './testb.mjs'; const {b} = testb; const a = { ccc: 'ccc', }; console.log(`aa:${a}`); console.log(`ab:${b}`); export default { a, }; // testb.mjs import testa from './testa.mjs'; const {a} = testa; const b = { ddd: 'ddd', }; console.log(`ba:${a}`); console.log(`bb:${b}`); export default { a, };
运行testa.mjs后结果为:
testa is not defined
at .../testb.mjs:3:13
翻了翻ES6入门中关于循环加载的部分,猜测JavaScript运行时,碰到import是直接进入引入的模块,运行一遍后再返回原模块运行接下来的代码
翻了翻谷歌的结果,看见有人说“一个避免出问题的方法就是少写立即执行的代码,尽量使用函数封装起来,需要的时候调用函数,就不会出错了。”
故把代码修改成如下:
// testa.mjs import testb from './testb.mjs'; const {b} = testb; const a = { ccc: 'ccc', }; console.log(`aa:${a.ccc}`); console.log(`ab:${b.ddd}`); b.ba(); export default { a, }; // testb.mjs import testa from './testa.mjs'; const b = { ddd: 'ddd', ba() { const { a } = testa; console.log(`ba:${a.ccc}`); console.log(`bb:${b.ddd}`); }, };
console.log(`bb:${b.ddd}`); export default { a, };
运行后发现还是报错,但是已经输出bb,aa,ab了,与猜想相同。
看了看错误代码:
testa is not defined
at Object.ba (.../testb.mjs:6:19)
at .../testa.mjs:11:3
猜测是在改行调用b.ba()时,testa并未进行模块的输出(指未执行到export default...),故在其外包裹一个0s延迟的setTimeout,代码就如所想的一样执行了。
注:此处0s延时的setTimeout用处是使内部的代码变为异步,其会在其他同步的JavaScript代码运行完毕后再运行,故此时testa已执行了模块的输出,所以并不会报错了。
- silverlight于javascript通信
- 微信上线小游戏:对流量基础入口应用商店革命
- Appium Desktop 使用
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(36)-文章发布系统③-kindeditor使用
- Windows Server 2008 R2 下配置证书服务器和HTTPS方式访问网站
- .Net 转战 Android 4.4 日常笔记(7)--apk的打包与反编译
- 丰富的silverlight控件
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(35)-文章发布系统②-构建项目
- .Net 转战 Android 4.4 日常笔记(6)--Android Studio DDMS用法
- 机器学习加密货币IOTA在机构支持下跃起
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(34)-文章发布系统①-简要分析
- WCF技术剖析之六:为什么在基于ASP.NET应用寄宿(Hosting)下配置的BaseAddress无效
- 微信发布了小游戏,这一次腾讯 vs 世界
- .Net 转战 Android 4.4 日常笔记(5)--新软件Android Studio 0.5.8安装与配置及问题解决
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- g2o、Eigen、Mat矩阵类型转换
- 相见恨晚!OLAP数仓基础入门大全
- Activiti7 流程变量(UEL-Value方式)
- 给IE9及其以下等不支持classList属性的浏览器,添加classList属性
- Docker使用手册 嵌入式Linux环境搭建
- Activiti7 流程部署
- Activiti7 启动流程实例
- linux文本处理工具及正则表达式
- linux目录结构及文件管理
- centos7-httpd虚拟主机
- k8s1.13.0二进制部署-node节点(四)
- k8s1.13.0二进制部署-flannel网络(二)
- k8s1.13.0二进制部署-master节点(三)
- k8s1.13.0二进制部署-ETCD集群(一)
- docker-企业级镜像仓库harbor