最近在做项目的时候发现在一个模块导出的时候是返回一个NEW以后实例化的对象，在其他地方使用的是同一个对象(一直以为是不用的对象，每次导入都是一个新的。。。还是太菜)。

在网上了解了ES6模块的一个基本机制，所以记录一下笔记。

ES6中模块不会重复执行

一个模块无论被多少个地方引用，引用多少次，模块内部始终只执行一次。

ES6中模块输出值的引用

在ES6中，导出输出的值会动态关联模块中的值:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// count.js
let count = 0
let add = function () {
  count ++
}
export { count, add }

// a.js
import { count, add } from "./count.js"
console.log(count) // 0
add()
console.log(count) // 1

// b.js
import { count } from "./count.js"
console.log(count) // 1

count的值是会动态变化的。

ES6模块循环依赖

import 会优先执行，跟位置无关

1
2
3
4
5
6
7
8
9
10
11
// a.js
console.log("a.js")
import { b } from "./b"

// b.js
export const b = "B"
console.log("b.js被执行")

// 结果
// b.js被执行
// a.js

import被JS引擎静态分析，会被提到模块的最前面，优先于模块中的其他部分的执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
// a.js
console.log(`Start A:`)

import { b } from "./b"

export const a = "AAA"

console.log(`A正在获取数据b: ${b}`)

console.log(`End A:`)

// b.js
console.log(`Start B:`)

import { a } from "./a"

export const b = "BBB"

console.log(`B正在获取数据a: ${a}`)

setTimeout(() => {
  console.log("end..")
})

console.log(`End B:`)

// 执行a.js
// 结果：

// Start B:
// B正在获取数据a: undefined
// End B:
// Start A:
// A正在获取数据b: BBB
// End A:
// end..

// main.js
import { a } from "./a"
import { b } from "./b"
console.log(a)
console.log(b)

// 执行a.js
// 结果：

// Start B:
// B正在获取数据a: undefined
// End B:
// Start A:
// A正在获取数据b: BBB
// End A:
// end..
// AAA
// BBB

(CommonJS)首先a.js加载b.js，此时a.js代码暂停在这里，执行加载b.js，在b.js中又加载a.js，但是a.js并没有加载完，所以获取到undefined，然后继续执行完以后，回到a.js正常执行。

(ES6) 首先a.js加载b.js，所以先执行b.js，而b.js又去加载a.js，这时候由于a.js已经开始执行了，所以不会重复执行，而是继续执行b.js，又a.js还未执行完，所以b.js获取到值是undefined，然后继续执行完以后，回到a.js正常执行。

CommonJS 和 ES6 的这个加载描述是在网上查阅的，还不是很懂，感觉两种方式的行为都是一样的啊= =!!

感觉CommonJS的加载方式套用在ES6，ES6的加载方式套用在CommonJS都能说的通。。CommonJS模块不也是只会加载一次嘛，套用在ES6感觉都没毛病。。。

在main.js中执行，得出并不会再去执行第二行代码b.js，原因是在执行a.js时b.js已经被加载，模块不会被重复加载。

一个关于动态引用的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// a.js
import {bar} from './b.js';
export function foo() {
  console.log('foo');
  bar();
  console.log('执行完毕');
}
foo();
 
// b.js
import {foo} from './a.js';
export function bar() {
  console.log('bar');
  if (Math.random() > 0.5) {
    foo();
  }
}

按照CommonJS规范，上面的代码是无法执行的。a先加载b，然后b又加载a，这时a还没有任何执行结果，所以输出结果为null，即对于b.js来说，变量foo的值等于null，后面的foo()就会报错。

但是，ES6可以执行上面的代码，a.js之所以能够执行，原因就在于ES6加载的变量都是动态引用其所在模块的。只要引用存在，代码就能执行。

会到问题到最开始，在导出时返回new对象到操作，只有在第一次加载的时候，会执行模块中的代码，返回一个实例化以后的对象，以后的每次导入，都是第一次的结果，并不会重新在去执行一次模块的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// obj.js
class TestObj {
  this.name = "";

  setName = (name) => {
    this.name = name;
  }

  print = () => {
    console.log(this.name);
  }
}
export default new TestObj();

// a.js
import TestObj from "./TestObj"
TestObj.setName("Sukoshi")
console.log(TestObj.print()) // Sukoshi

// b.js
import TestObj from "./TestObj"
console.log(TestObj.print()) // Sukoshi