说到前端模块化，就不得不说到循环加载，就像混乱背后隐藏着的清晰地秩序。

什么叫循环加载？

我们来看一段代码。1

2

3

4

5

6

7

8

9

10

11

12

13const b = require('./b');

b();

module.exports = function(){

console.log('This is a.js');

}

//b.js

const a = require('./a');

a()

module.exports = function(){

console.log('This is b.js')

}

a 加载了 b，b 也加载了 a，这个时候，循环加载就出现了。

CommonJS 下的循环加载

运行 node a.js 你会发现，报错了:1

2

3

4

5

6

7

8

9

10

11

12

13

14

15/Users/jackiels/learn/test/b.js:8

a()

^

TypeError: a is not a function

at Object. (/Users/jackiels/learn/test/b.js:8:1)

at Module._compile (module.js:571:32)

at Object.Module._extensions..js (module.js:580:10)

at Module.load (module.js:488:32)

at tryModuleLoad (module.js:447:12)

at Function.Module._load (module.js:439:3)

at Module.require (module.js:498:17)

at require (internal/module.js:20:19)

at Object. (/Users/jackiels/learn/test/a.js:8:11)

at Module._compile (module.js:571:32)

为什么会报错？

我们来 console.log('a:',a)，返回的结果显示 a 是一个{}。明明 module.exports 导出的是一个函数，为什么就变成了一个空对象？以下内容引自CommonJS 的加载原理CommonJS 的一个模块，就是一个脚本文件。require 命令第一次加载该脚本，就会执行整个脚本，然后在内存生成一个对象。1

2

3

4

5

6{

id: '...',

exports: { ... },

loaded: true,

...

}

上面代码中，该对象的 id 属性是模块名，exports 属性是模块输出的各个接口，loaded 属性是一个布尔值，表示该模块的脚本是否执行完毕。其他还有很多属性，这里都省略了。以后需要用到这个模块的时候，就会到 exports 属性上面取值。即使再次执行 require 命令，也不会再次执行该模块，而是到缓存之中取值。

这个时候的 exports 那个字段的值就是 {}，之所以这样因为 CommonJS 中非常重要的一个加载模式：一旦出现某个模块被”循环加载”，就只输出已经执行的部分，还未执行的部分不会输出

我们回头看看我们的栗子🌰，执行 a.js，a 里面require(./b)，所以去执行 b.js

b.js 里面require(./a)，循环加载出现，所以 a.js 会输出已执行的部分

a.js 执行完 require('b.js') 之后什么也没做，所以 a.js 相当于只是生成了一个 module 对象，所以 b.js 继续执行。想深入研究 module 对象看这个

这时候 a.js 的 exports 是一个刚刚初始化的对象，什么内容都没有，所以报错了a is not a function。

怎样可以正确运行？

我们把 a.js 改一下在运行一次。1

2

3

4

5

6module.exports = function(){

console.log('This is a.js');

}

const b = require('./b');

b();

运行结果，可以正常执行，1

2This is a

This is b

再来看看执行流程执行 a.js，module.exports = function(){...}先定义了module.exports

执行require('./b')，进入 b.js

执行require('./a')，循环加载出现，所以 a.js 输出已执行的部分

a.js 已执行的部分是module.exports = function(){...}，所以，这时候 b.js 中的变量 a 等于function(){...}

a()输出This is a.js，继续执行 b 里面的module.exports = function(){...}

b.js 执行完毕，回到 a.js

a.js 中的变量 b 等于module.exports = function(){...}

b()输出 This is b.js 执行完毕

整个的流程是一个 程序执行栈，先进后出。

再看一个官方的栗子1

2

3

4

5

6console.log('a starting');

exports.done = false;

const b = require('./b.js');

console.log('in a, b.done = %j', b.done);

exports.done = true;

console.log('a done');

b.js:1

2

3

4

5

6console.log('b starting');

exports.done = false;

const a = require('./a.js');

console.log('in b, a.done = %j', a.done);

exports.done = true;

console.log('b done');

main.js:1

2

3

4console.log('main starting');

const a = require('./a.js');

const b = require('./b.js');

console.log('in main, a.done=%j, b.done=%j', a.done, b.done);

运行如下1

2

3

4

5

6

7

8

9$ node main.js

main starting

a starting

b starting

in b, a.done = false

b done

in a, b.done = true

a done

in main, a.done=true, b.done=true

运行过程详解如下：(--->表示在哪个文件之中)1

2

3

4

5

6

7

8

9

10

11

12

13--->main require(a) 执行后，会直接运行 a 脚本，

--->a exports.done = false

--->a require(b) 执行后，会直接运行 b 脚本

--->b exports.done = false

--->b require(a) 执行后出现循环加载，a 模块只会输出已运行的部分, exports.done = false 这时候 b.js 中的 a = { done:false }

--->b console.log(' 在 b.js 之中，a.done = %j', a.done); 在 b.js 之中，a.done = false

--->b exports.done = true;

--->b console.log('b.js 执行完毕 ') 开始继续执行 a

--->a console.log(' 在 a.js 之中，b.done = %j', b.done); 这时候，b 输出已运行的部分，exports.done = true，这时候 a.js 中的 b = { done: true }

--->a exports.done = true;

--->a console.log('a.js 执行完毕 ');

--->main require('b.js')，因为 b.js 在之前已经被 a 执行完了，所以相当于内存中的 loaded 已经为 true 了，所以不会去在执行一次 b.js 而是直接取到它输出的结果 b = { done:true }

--->main console.log(' 在 main.js 之中, a.done=%j, b.done=%j', a.done, b.done); 在 main.js 之中, a.done=true, b.done=true

我前面说过，程序执行栈，用栈的思路捋一下就是：执行 main

—> requrire(a)进栈

—> 执行 a 并保存结果

—> require(b) 进栈

—> 执行 b 并保存结果

—> require(a),a 已在内存中取当前 a 执行结果

—> b 执行完毕并保存结果出栈

—> 执行 a 并保存结果

—> a 执行完毕并保存结果出栈

—> 执行 main

—> require(b),b 已在内存中取当前 b 执行结果

—> 程序结束

以上例子的执行结果，都表现出以下两个重点：require 命令第一次加载该脚本，就会执行整个脚本，然后在内存生成一个对象

出现某个模块被”循环加载”，就只输出已经执行的部分，还未执行的部分不会输出

ES6 Module 下的循环加载

我们来看个代码1

2

3

4

5

6

7

8

9

10

11

12

13

14// a.js

import {bar} from './b.js';

export function (){

console.log('在 a.js')

bar();

}

foo() // 启动循环加载

//b.js

import {foo} from './a.js';

export function bar(){

console.log('在 b.js')

foo();

}

执行这段代码不久之后你就会发现，内存爆了。1

2

3

4

5

6

7

8

9

10

11RangeError: Maximum call stack size exceeded

at process.get [as domain] (domain.js:22:16)

at process.nextTick (internal/process/next_tick.js:156:22)

at onwrite (_stream_writable.js:372:15)

at WriteStream.Socket._writeGeneric (net.js:734:5)

at WriteStream.Socket._write (net.js:744:8)

at doWrite (_stream_writable.js:329:12)

at writeOrBuffer (_stream_writable.js:315:5)

at WriteStream.Writable.write (_stream_writable.js:241:11)

at WriteStream.Socket.write (net.js:671:40)

at Console.log (console.js:43:16)

WTF？

我们用 babel 编译一下看看结果

a.js 编译之后1

2

3

4

5

6

7

8

9

10

11

12

13

14

15;

Object.defineProperty(exports, "__esModule", {

value: true

});

exports.foo = foo;

var _b = require('./b.js');

function (){

console.log('在 a.js');

(0, _b.bar)(); // 这个语法目的是绑定 bar 的 this 为当前这个 module，babel 编译的结果，与本文关系不大，耻略

} // a.js

foo(); // 启动循环加载

b.js 编译之后1

2

3

4

5

6

7

8

9

10

11

12

13;

Object.defineProperty(exports, "__esModule", {

value: true

});

exports.bar = bar;

var _a = require('./a.js');

function bar(){

console.log('在 b.js');

(0, _a.foo)();

}

我们可以清晰地看到，所有对函数的执行都是引用方式的，相当于就是两个函数互相调用导致了死循环。所以得出一个结论：在 ES6 中不会出现所谓的“循环加载”，只是会有循环调用，而且这种循环调用也是因为写代码的人的思维短路造成的，所以我们根本我不用担心循环加载，只需要注意自己写代码的逻辑就好了。

参考资料