慎用import/export嵌套

广告位招租
扫码页面底部二维码联系

今天遇到一个极其蛋疼的情况,两个js模块原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】,相互循环引用,造成一个bug。

本文作者:唐霜,转载请注明出处。原创内容,盗版必究。未经授权,禁止复制转载。
// a.js
import { SomeB } from './b.js'

export const SomeA = 'aaa:' + SomeB
// b.js
import { SomeA } from './a.js'

export const SomeB = 'bbb:' + SomeA

接下来我在一个文件中使用模块b:未经授权,禁止复制转载。

【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】【本文首发于唐霜的博客】
// c.js
import { SomeB } from './b.js'

console.log(SomeB)

你知道会得到什么结果吗?总之是得到错误的本文作者:唐霜,转载请注明出处。【未经授权禁止转载】结果。在chrome中直接运行会直接报错【本文受版权保护】未经授权,禁止复制转载。,说a.js中的SomeB未定义。这……

【未经授权禁止转载】原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。

其实这是真的。因为a.js和b.js相互【版权所有,侵权必究】【转载请注明来源】引用,导致的结果就是,无论是谁,在执行的【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.net时候,都需要另外一个模块加载完成才能进行【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】自己的解释。这就很蛋疼:

【原创不易,请尊重版权】【本文首发于唐霜的博客】【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。
c.js -> b.js -> a.js -> b.js -> a.js ...

而js解释器一般会灵活处理,即不会死循环【原创内容,转载请注明出处】【原创不易,请尊重版权】的去如此解释,而是在发现循环的时候,就直【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。接结束,即:

本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】
c.js -> b.js -> a.js $

但是,当a.js需要b.js所带来的上下原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】文时,实际上b.js还没有被解释,因为b转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】.js依赖a.js的解释结果,因此,在a【未经授权禁止转载】转载请注明出处:www.tangshuang.net.js中,SomeB被认为是not de著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】fined,这已经不是TypeError【本文受版权保护】【原创不易,请尊重版权】,而是ReferenceError,也就【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】是在上下文中,该变量未被声明。

【本文受版权保护】【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】

因此,千万不要循环引用啊,切记切记。【转载请注明来源】

未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。