问题描述
两个JS文件存在循环import时,将导致undefined问题
import Type from "./test"
console.log(Type.Image); //这里报错,说Type是个undefined,不能去取它的Image属性
原因分析
如下两个js,假定先加载a.js:
//a.js
console.log("before import b")
import {b} from "./b"
console.log("b is " + b)
export let a = b+1;
//b.js
console.log("before import a")
import {a} from "./a"
console.log("a is " + a)
export let b = a+1;
结果是
before import a
a is undefined
before import b
b is NAN
这里有一个有趣的现象就是第一句输出并不是before import b,也就是虽然import语句在后面,但确会更早执行,当执行import b时,加载并运行b.js,从而第一句输出是before import a。
然后就是当运行b.js时,发现又需要import a.js,此时不会再去加载a.js了,而是认为整个a.js模块是{},所以a的值就是undefined了。
如何避免
对于像constants, enum, global等一些需要立即执行的模块,定义Constants.js公共文件,从而避免循环依赖。