JavaScript 模块的循环加载

"循环加载"（circular dependency）指的是，<code>a</code>脚本的执行依赖<code>b</code>脚本，而<code>b</code>脚本的执行又依赖<code>a</code>脚本。

通常，"循环加载"表示存在强耦合，如果处理不好，还可能导致递归加载，使得程序无法执行，因此应该避免出现。

但是实际上，这是很难避免的，尤其是依赖关系复杂的大项目，很容易出现<code>a</code>依赖b，<code>b</code>依赖<code>c</code>，<code>c</code>又依赖<code>a</code>这样的情况。这意味着，模块加载机制必须考虑"循环加载"的情况。

本文介绍javascript语言如何处理"循环加载"。目前，最常见的两种模块格式commonjs和es6，处理方法是不一样的，返回的结果也不一样。

介绍es6如何处理"循环加载"之前，先介绍目前最流行的commonjs模块格式的加载原理。

commonjs的一个模块，就是一个脚本文件。<code>require</code>命令第一次加载该脚本，就会执行整个脚本，然后在内存生成一个对象。

以后需要用到这个模块的时候，就会到<code>exports</code>属性上面取值。即使再次执行<code>require</code>命令，也不会再次执行该模块，而是到缓存之中取值。

commonjs模块的重要特性是加载时执行，即脚本代码在<code>require</code>的时候，就会全部执行。commonjs的做法是，一旦出现某个模块被"循环加载"，就只输出已经执行的部分，还未执行的部分不会输出。

上面代码之中，<code>a.js</code>脚本先输出一个<code>done</code>变量，然后加载另一个脚本文件<code>b.js</code>。注意，此时<code>a.js</code>代码就停在这里，等待<code>b.js</code>执行完毕，再往下执行。

再看<code>b.js</code>的代码。

上面代码之中，<code>b.js</code>执行到第二行，就会去加载<code>a.js</code>，这时，就发生了"循环加载"。系统会去<code>a.js</code>模块对应对象的<code>exports</code>属性取值，可是因为<code>a.js</code>还没有执行完，从<code>exports</code>属性只能取回已经执行的部分，而不是最后的值。

<code>a.js</code>已经执行的部分，只有一行。

因此，对于<code>b.js</code>来说，它从<code>a.js</code>只输入一个变量<code>done</code>，值为<code>false</code>。

然后，<code>b.js</code>接着往下执行，等到全部执行完毕，再把执行权交还给<code>a.js</code>。于是，<code>a.js</code>接着往下执行，直到执行完毕。我们写一个脚本<code>main.js</code>，验证这个过程。

执行<code>main.js</code>，运行结果如下。

上面的代码证明了两件事。一是，在<code>b.js</code>之中，<code>a.js</code>没有执行完毕，只执行了第一行。二是，<code>main.js</code>执行到第二行时，不会再次执行<code>b.js</code>，而是输出缓存的<code>b.js</code>的执行结果，即它的第四行。

es6模块的运行机制与commonjs不一样，它遇到模块加载命令<code>import</code>时，不会去执行模块，而是只生成一个引用。等到真的需要用到时，再到模块里面去取值。

因此，es6模块是动态引用，不存在缓存值的问题，而且模块里面的变量，绑定其所在的模块。请看下面的例子。

上面代码中，<code>m1.js</code>的变量<code>foo</code>，在刚加载时等于<code>bar</code>，过了500毫秒，又变为等于<code>baz</code>。

让我们看看，<code>m2.js</code>能否正确读取这个变化。

上面代码表明，es6模块不会缓存运行结果，而是动态地去被加载的模块取值，以及变量总是绑定其所在的模块。

这导致es6处理"循环加载"与commonjs有本质的不同。es6根本不会关心是否发生了"循环加载"，只是生成一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。

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

但是，es6可以执行上面的代码。

<code>a.js</code>之所以能够执行，原因就在于es6加载的变量，都是动态引用其所在的模块。只要引用是存在的，代码就能执行。

上面代码中，<code>even.js</code>里面的函数<code>foo</code>有一个参数<code>n</code>，只要不等于0，就会减去1，传入加载的<code>odd()</code>。<code>odd.js</code>也会做类似操作。

运行上面这段代码，结果如下。

上面代码中，参数<code>n</code>从10变为0的过程中，<code>foo()</code>一共会执行6次，所以变量<code>counter</code>等于6。第二次调用<code>even（）</code>时，参数<code>n</code>从20变为0，<code>foo()</code>一共会执行11次，加上前面的6次，所以变量<code>counter</code>等于17。

这个例子要是改写成commonjs，就根本无法执行，会报错。

上面代码中，<code>even.js</code>加载<code>odd.js</code>，而<code>odd.js</code>又去加载<code>even.js</code>，形成"循环加载"。这时，执行引擎就会输出<code>even.js</code>已经执行的部分（不存在任何结果），所以在<code>odd.js</code>之中，变量<code>even</code>等于<code>null</code>，等到后面调用<code>even(n-1)</code>就会报错。

（完）