20200425

Plan

• 你不知道的 js -- 代码组织

Notes

模块依赖环

• 模块 A

import bar from "./B";

export default function foo(x) {
  if (x > 10) {
    return bar(x - 1);
  }
  return x * 2;
}

• 模块 B

import foo from "./A";

export default function bar(y) {
  if (y > 5) {
    return foo(y / 2);
  }
  return y * 3;
}

• index.js

import foo from "./A";

foo(25); // 11

demo

如何工作的？

1. 首先加载模块 A；分析所有模块 A 的导出；然后处理 import bar from './B'
2. 加载 B 后；分析所有 B 的导出；然后处理 import foo from './A'
3. 已经加载过 A 模块了，所以可以验证 B 中的 import foo from './A' 是否有效
4. 分析 B 结束，得到 B 模块的输出模块，可以验证 A 模块中的 import bar from './B'是否有效。

错误的例子

• 模块 A

import bar from "./B";

let a = bar + 2;
export default a;

• 模块 B

import foo from "./A";

export default foo + 1;

结果是什么？

$ ReferenceError: foo is not defined

More