JavaScript 모듈_javascript 기술의 순환 로딩 구현 방법

"순환 종속성"이란 스크립트 a의 실행이 스크립트 b에 의존하고, 스크립트 b의 실행이 스크립트 a에 의존한다는 것을 의미합니다.

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

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

일반적으로 "루프 로딩"은 강한 결합이 있음을 나타냅니다. 잘 처리하지 않으면 재귀 로딩으로 이어져 프로그램이 실행되지 않을 수도 있으므로 피해야 합니다.

그러나 실제로는 이를 피하기가 어렵습니다. 특히 종속성이 복잡한 대규모 프로젝트의 경우 a가 b에 의존하고, b가 c에 의존하고, c가 a에 의존하기 쉽습니다. 이는 모듈 로딩 메커니즘이 "루프 로딩" 상황을 고려해야 함을 의미합니다.

이 기사에서는 JavaScript 언어가 "루프 로딩"을 처리하는 방법을 소개합니다. 현재 가장 일반적인 두 가지 모듈 형식인 CommonJS와 ES6은 서로 다른 처리 방법을 가지며 서로 다른 결과를 반환합니다.

1. CommonJS 모듈의 로딩 원리

ES6에서 "루프 로딩"을 처리하는 방법을 소개하기 전에 먼저 가장 널리 사용되는 CommonJS 모듈 형식의 로딩 원리를 소개하겠습니다.

CommonJS의 모듈은 스크립트 파일입니다. require 명령이 처음으로 스크립트를 로드할 때 전체 스크립트를 실행한 다음 메모리에 개체를 생성합니다.

{
 id: '...',
 exports: { ... },
 loaded: true,
 ...
}

위 코드에서 객체의 id 속성은 모듈 이름, 내보내기 속성은 모듈이 출력하는 각 인터페이스, 로드 속성은 모듈의 스크립트가 실행되었는지 여부를 나타내는 부울 값입니다. 그 밖에도 많은 속성이 있지만 여기서는 생략합니다. (자세한 소개는 "require() 소스코드 해석"을 참고하세요.)

나중에 이 모듈을 사용해야 하는 경우 내보내기 속성에서 값을 가져옵니다. require 명령을 다시 실행하더라도 모듈은 다시 실행되지 않지만 캐시에서 값을 검색합니다.

2. CommonJS 모듈 루프 로딩

CommonJS 모듈의 중요한 기능은 로드 시 실행된다는 것입니다. 즉, 필요할 때 모든 스크립트 코드가 실행됩니다. CommonJS의 접근 방식은 모듈이 "루프 로드"되면 실행된 부분만 출력되고 실행되지 않은 부분은 출력되지 않는다는 것입니다.

공식 문서에 있는 예시를 살펴보겠습니다. 스크립트 파일 a.js의 코드는 다음과 같습니다.

exports.done = false;
var b = require('./b.js');
console.log('在 a.js 之中，b.done = %j', b.done);
exports.done = true;
console.log('a.js 执行完毕');

위 코드에서 a.js 스크립트는 먼저 done 변수를 출력한 후 다른 스크립트 파일인 b.js를 로드합니다. 여기서 a.js 코드는 여기서 멈추고 b.js가 실행을 완료할 때까지 기다린 후 계속 실행됩니다.

b.js 코드를 다시 살펴보세요.

exports.done = false;
var a = require('./a.js');
console.log('在 b.js 之中，a.done = %j', a.done);
exports.done = true;
console.log('b.js 执行完毕');

위 코드에서 두 번째 줄까지 b.js가 실행되면 a.js가 로드됩니다. 이때 "loop loading"이 발생합니다. 시스템은 a.js 모듈에 해당하는 객체의 내보내기 속성 값을 가져옵니다. 그러나 a.js가 아직 실행되지 않았기 때문에 내보내기 속성에서는 실행된 부분만 가져올 수 있으며 최종 값은 가져올 수 없습니다.

a.js의 실행 부분은 한 줄뿐입니다.

exports.done = false;

따라서 b.js의 경우 a.js에서 수행한 하나의 변수만 입력하고 값은 false입니다.

이후 b.js는 계속 실행됩니다. 모든 실행이 완료되면 실행 권한이 a.js에 반환됩니다. 따라서 a.js는 실행이 완료될 때까지 계속 실행됩니다. 이 프로세스를 확인하기 위해 main.js 스크립트를 작성합니다.

var a = require('./a.js');
var b = require('./b.js');
console.log('在 main.js 之中, a.done=%j, b.done=%j', a.done, b.done);

main.js를 실행해 본 결과는 다음과 같습니다.

$ node main.js

在 b.js 之中，a.done = false
b.js 执行完毕
在 a.js 之中，b.done = true
a.js 执行完毕
在 main.js 之中, a.done=true, b.done=true

위 코드는 두 가지를 증명합니다. 먼저, b.js에서는 a.js가 실행되지 않고 첫 번째 라인만 실행되었습니다. 둘째, main.js가 두 번째 라인까지 실행되면 b.js는 다시 실행되지 않고 b.js의 캐시된 실행 결과, 즉 네 번째 라인이 출력됩니다.

exports.done = true;

3. ES6 모듈의 루프 로딩

ES6 모듈의 작동 메커니즘은 CommonJS와 다릅니다. 모듈 로딩 명령 import가 발생하면 모듈을 실행하지 않고 참조만 생성합니다. 실제로 사용해야 할 때까지 기다린 다음 모듈에서 값을 가져옵니다.

따라서 ES6 모듈은 동적 참조이므로 값을 캐싱하는 데 문제가 없으며 모듈의 변수는 해당 변수가 위치한 모듈에 바인딩됩니다. 아래 예를 참조하세요.

// m1.js
export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

// m2.js
import {foo} from './m1.js';
console.log(foo);
setTimeout(() => console.log(foo), 500);

위 코드에서 m1.js의 변수 foo는 처음 로드될 때 bar와 동일하며 500밀리초 후에는 다시 baz와 동일해집니다.

m2.js가 이 변경 사항을 올바르게 읽을 수 있는지 확인해 보겠습니다.

$ babel-node m2.js

bar
baz

위 코드는 ES6 모듈이 실행 결과를 캐시하지 않고, 로드된 모듈의 값을 동적으로 획득하며, 변수는 항상 자신이 위치한 모듈에 바인딩되어 있음을 보여줍니다.

이로 인해 ES6는 CommonJS와 본질적으로 다르게 "루프 로딩"을 처리합니다. ES6는 "루프 로딩"이 발생하는지 전혀 신경 쓰지 않으며, 단지 로드된 모듈에 대한 참조를 생성합니다. 개발자는 값이 실제로 얻어질 때 그 값을 얻을 수 있는지 확인해야 합니다.

다음 예를 참조하세요(Axel Rauschmayer 박사의 "ES6 탐색"에서 발췌).

// a.js
import {bar} from './b.js';
export function foo() {
 bar(); 
 console.log('执行完毕');
}
foo();

// b.js
import {foo} from './a.js';
export function bar() { 
 if (Math.random() > 0.5) {
 foo();
 }
}

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

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

$ babel-node a.js

执行完毕

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

我们再来看ES6模块加载器SystemJS给出的一个例子。

// even.js
import { odd } from './odd'
export var counter = 0;
export function even(n) {
 counter++;
 return n == 0 || odd(n - 1);
}

// odd.js
import { even } from './even';
export function odd(n) {
 return n != 0 && even(n - 1);
}

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

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

$ babel-node
> import * as m from './even.js';
> m.even(10);
true
> m.counter
6
> m.even(20)
true
> m.counter
17

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

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

// even.js
var odd = require('./odd');
var counter = 0;
exports.counter = counter;
exports.even = function(n) {
 counter++;
 return n == 0 || odd(n - 1);
}

// odd.js
var even = require('./even').even;
module.exports = function(n) {
 return n != 0 && even(n - 1);
}

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

$ node
> var m = require('./even');
> m.even(10)
TypeError: even is not a function

[说明] 本文是我写的《ECMAScript 6入门》第20章《Module》中的一节。