关于ES6的module的循环加载

最新推荐文章于 2023-11-17 15:36:42 发布

bafudanbi37558

最新推荐文章于 2023-11-17 15:36:42 发布

阅读量187

点赞数

原文链接：http://www.cnblogs.com/FreezeNow/p/10735333.html

版权

今天写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,
};