Javascript 모듈러 프로그래밍에 대한 자세한 설명_기본지식

모듈식 프로그래밍은 매우 일반적인 Javascript 프로그래밍 모델입니다. 일반적으로 코드를 더 쉽게 이해할 수 있지만 널리 알려지지 않은 좋은 사례도 많이 있습니다.

기본

Eric Miraglia(YUI 개발자)가 3년 전 모듈 패턴을 설명하는 블로그를 처음 게시한 이후 일부 모듈 패턴에 대한 간략한 개요부터 시작하겠습니다. 이러한 모듈식 모드에 이미 익숙하다면 이 섹션을 건너뛰고 "고급 모드"부터 읽어 보세요.

익명 폐쇄

이것이 모든 것을 가능하게 하는 기본 구조이자 자바스크립트의 가장 큰 특징이기도 합니다. 간단히 익명 함수를 생성하고 즉시 실행하겠습니다. 모든 코드는 이 함수 내에서 실행되며 사유화를 제공하는 클로저에서 실행됩니다. 이는 애플리케이션의 전체 수명 주기 동안 이러한 클로저의 변수를 사용할 수 있게 만드는 데 충분합니다.

코드 복사 코드는 다음과 같습니다.

(함수 () {
// ... 모든 변수와 함수는 이 범위에만 있습니다
// 여전히 모든 전역 변수에 대한 액세스를 유지합니다
}());

익명 함수를 둘러싼 가장 바깥쪽 괄호 쌍에 유의하세요. Javascript의 언어 특성상 이 괄호 쌍이 필요합니다. JavaScript에서는 function 키워드로 시작하는 명령문은 항상 함수 선언으로 간주됩니다. 이 코드를 괄호로 묶으면 인터프리터에게 그것이 함수 표현식임을 알립니다.

전역 변수 가져오기

자바스크립트에는 암시적 전역 변수라는 기능이 있습니다. 변수 이름이 사용되는 위치에 관계없이 인터프리터는 범위 체인을 거꾸로 따라가서 변수의 var 선언문을 찾습니다. var 선언이 없으면 해당 변수는 전역 변수로 간주됩니다. 이 변수가 대입문에서 사용되는데 해당 변수가 존재하지 않으면 전역 변수가 생성됩니다. 이는 익명 클로저에서 전역 변수를 사용하거나 생성하는 것이 쉽다는 것을 의미합니다. 불행하게도 이로 인해 코드 유지 관리가 극도로 어려워집니다. 왜냐하면 사람의 눈으로는 어떤 변수가 전역 변수인지 한눈에 알 수 없기 때문입니다.

다행히도 익명 기능을 사용하면 쉽게 해결할 수 있습니다. 단순히 전역 변수를 익명 함수에 인수로 전달함으로써 암시적 전역 변수보다 더 깔끔하고 빠른 코드를 얻을 수 있습니다. 예를 들면 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

(함수($, YAHOO) {
// 이제 이 코드에서 전역 jQuery($) 및 YAHOO에 액세스할 수 있습니다
}(jQuery, YAHOO));

모듈 내보내기

때때로 전역 변수를 사용하고 싶을 뿐만 아니라 반복 사용을 위해 선언하고 싶을 때도 있습니다. 익명 함수의 반환 값을 통해 이를 내보내면 쉽게 이 작업을 수행할 수 있습니다. 이렇게 하면 모듈식 패턴의 기본 프로토타입이 완성되고 이어서 완전한 예제가 나옵니다.

코드 복사 코드는 다음과 같습니다.

var MODULE = (함수 () {
var 내 = {},
        privateVariable = 1;
함수 privateMethod() {
               // ...
}
My.moduleProperty = 1;
My.moduleMethod = 함수 () {
               // ...
};
돌려주세요;
}());

MODULE이라는 전역 모듈을 선언했습니다. 여기에는 MODULE.moduleMethod라는 메서드와 MODULE.moduleProperty라는 변수라는 두 가지 공개 속성이 있습니다. 또한 익명 함수 클로저를 사용하여 비공개 내장 상태를 유지합니다. 동시에 필요한 전역 변수를 쉽게 가져오고 이전에 배운 대로 이 모듈식 패턴을 사용할 수 있습니다.

고급 모드

위 섹션에서 설명한 기반은 많은 상황에 충분하며 이제 이 모듈식 패턴을 더욱 발전시켜 더욱 강력하고 확장 가능한 구조를 만들 수 있습니다. MODULE 모듈부터 시작하여 이러한 고급 모드를 하나씩 소개하겠습니다.

확대 모드

전체 모듈이 하나의 파일에 있어야 하는 것은 모듈 모드의 제한 사항입니다. 대규모 프로젝트에 참여한 사람이라면 누구나 js를 여러 파일로 분할하는 것의 가치를 이해할 것입니다. 다행스럽게도 모듈 증폭을 위한 훌륭한 구현이 있습니다. 먼저 모듈을 가져와서 속성을 추가하고 마지막으로 내보냅니다. 예는 다음과 같습니다. 원본 MODULE에서 확대합니다.

코드 복사 코드는 다음과 같습니다.

var MODULE = (함수 (내) {
My.anotherMethod = 함수() {
// 메소드 추가...
};
돌려주세요;
}(모듈));

여기서는 필수는 아니지만 일관성을 보장하기 위해 var 키워드를 사용합니다. 이 코드가 실행된 후 모듈에는 이미 MODULE.anotherMethod라는 새로운 공개 메서드가 있습니다. 증폭 파일은 또한 자체적인 내장 상태와 가져온 개체를 유지합니다.

와이드 줌 모드

위의 예에서는 초기화 모듈을 먼저 실행한 다음 증폭 모듈을 실행할 수 있습니다. 물론 때로는 이것이 필요하지 않을 수도 있습니다. 성능을 향상시키기 위해 Javascript 애플리케이션이 수행할 수 있는 가장 좋은 작업 중 하나는 스크립트를 비동기적으로 실행하는 것입니다. 유연한 다중 부분 모듈을 생성하고 허용 확대 모드를 통해 순서에 관계없이 로드할 수 있습니다. 각 파일은 다음 구조에 따라 구성되어야 합니다.

코드 복사 코드는 다음과 같습니다.

var MODULE = (함수 (내) {
// 기능 추가...
돌려주세요;
}(모듈 || {}));

이 패턴에서는 var 표현식이 필요합니다. MODULE이 초기화되지 않은 경우 이 import 문은 MODULE을 생성합니다. 즉, LABjs와 같은 도구를 사용하여 차단 없이 모든 모듈 파일을 병렬로 로드할 수 있습니다.

긴밀 줌 모드

와이드 줌 모드는 훌륭하지만 모듈에 몇 가지 제한 사항이 있습니다. 가장 중요한 것은 모듈의 속성을 안전하게 재정의할 수 없다는 것입니다. 또한 초기화 중에는 다른 파일의 속성을 사용할 수 없습니다(그러나 런타임에는 사용할 수 있습니다). 긴밀한 증폭 모드에는 순차적인 로드 순서가 포함되며 속성 재정의가 허용됩니다. 다음은 간단한 예입니다(원본 모듈 확대).

코드 복사 코드는 다음과 같습니다.

var MODULE = (함수 (내) {
var old_moduleMethod = my.moduleMethod;
My.moduleMethod = 함수 () {
// 메소드 재정의, old_moduleMethod를 통해 이전 버전에 액세스할 수 있습니다...
};
돌려주세요;
}(모듈));

위 예제에서는 MODULE.moduleMethod 구현을 재정의했지만 필요할 경우 원래 메서드에 대한 참조를 유지할 수 있습니다.

복제와 상속

코드 복사 코드는 다음과 같습니다.

var MODULE_TWO = (함수 (기존) {
var 내 = {},
         키;
for (기존 키) {
If (old.hasOwnProperty(key)) {
                내[키] = 이전[키];
}
}
var super_moduleMethod = old.moduleMethod;
My.moduleMethod = 함수 () {
// 복제본의 메서드를 재정의하고 super_moduleMethod를 통해 super에 액세스합니다
};
돌려주세요;
}(모듈));

이 모드는 아마도 유연성이 가장 낮은 옵션일 것입니다. 코드가 더 깔끔하게 보이긴 하지만 유연성이 저하됩니다. 위에서 쓴 것처럼 속성이 개체나 함수인 경우 복사되지 않지만 개체나 함수에 대한 두 번째 참조가 됩니다. 그 중 하나를 수정하면 다른 것도 동시에 수정됩니다(번역자 주: 기본적으로 동일하기 때문입니다!). 이 객체 복제 문제는 재귀 복제 프로세스를 통해 해결할 수 있지만 함수 복제로는 해결하지 못할 수도 있습니다. eval을 사용하여 해결할 수도 있습니다. 따라서 이 기사에서는 완전성을 위해서만 이 방법을 설명합니다.

교차 파일 개인 변수

모듈을 여러 파일로 분할하는 데에는 주요 제한 사항이 있습니다. 각 파일은 자체 개인 변수를 유지하며 다른 파일의 개인 변수에 액세스할 수 없습니다. 하지만 이 문제는 해결될 수 있습니다. 다음은 파일 전체에서 개인 변수를 유지 관리하는 허용 모듈의 예입니다.

코드 복사 코드는 다음과 같습니다.

var MODULE = (함수 (내) {
var _private = my._private = my._private || {},
_seal = my._seal = my._seal || 함수() {
                 my._private 삭제;
                             my._seal 삭제;
> },
_unseal = my._unseal = my._unseal || 함수 () {
                 my._private = _private;
                 my._seal = _seal;
                   my._unseal = _unseal;
        };
// _private, _seal 및 _unseal에 대한 영구 액세스
돌려주세요;
}(모듈 || {}));

모든 파일은 해당 _private 변수에 속성을 설정할 수 있으며 다른 파일에서 액세스할 수 있는 것으로 이해됩니다. 이 모듈이 로드되면 애플리케이션은 MODULE._seal()을 호출하여 내부 _private에 대한 외부 호출을 방지할 수 있습니다. 모듈의 크기를 조정해야 하는 경우 두 파일 중 하나의 내부 메서드는 새 파일을 로드하기 전에 _unseal()을 호출하고 새 파일이 실행된 후에 _seal()을 다시 호출할 수 있습니다. 저는 오늘 직장에서 이 패턴을 사용하는데, 다른 곳에서는 이런 접근 방식을 본 적이 없습니다. 나는 이것이 매우 유용한 패턴이라고 생각하며 패턴 자체에 대한 기사를 쓸 가치가 있습니다.

하위 모듈

마지막 고급 모드가 가장 쉽습니다. 서브모듈을 생성하는 훌륭한 예가 많이 있습니다. 이는 일반 모듈을 생성하는 것과 같습니다.

코드 복사 코드는 다음과 같습니다.

MODULE.sub = (함수 () {
var 내 = {};
// ...
돌려주세요;
}());

간단해 보일 수도 있지만 여기서 언급할 가치가 있다고 생각합니다. 하위 모듈에는 증폭 모드 및 민영화 상태를 포함하여 일반 모듈의 모든 고급 장점이 있습니다.

결론

대부분의 고급 모드를 결합하여 더욱 유용한 모드를 만들 수 있습니다. 복잡한 애플리케이션을 설계하기 위해 모듈식 패턴을 추천한다면, 그것은 관대한 확장 패턴, 전용 변수 및 하위 모듈의 조합일 것입니다.

저는 이러한 패턴의 성능 문제에 대해 생각해 본 적이 없지만 이것을 더 간단한 사고 방식으로 번역하고 싶습니다. 모듈식 패턴의 성능이 좋으면 최소화하는 작업을 잘 수행할 수 있습니다. 이 스크립트 파일이 더 빠릅니다. 관대한 증폭 모드를 사용하면 간단한 비차단 병렬 다운로드가 가능하므로 다운로드 속도가 빨라집니다. 초기화 시간은 다른 방법보다 약간 느릴 수 있지만 그만한 가치가 있습니다. 전역 변수를 올바르게 가져오기만 하면 런타임 성능에 영향이 없어야 하며 하위 모듈의 개인 변수를 사용하여 참조 체인을 단축하여 실행 속도를 높이는 것이 가능합니다.

끝으로 다음은 상위 모듈에 동적으로 로드되는 하위 모듈의 예입니다(존재하지 않는 경우 상위 모듈 생성). 단순화를 위해 개인 변수를 제거했습니다. 물론 개인 변수를 추가하는 것도 매우 간단합니다. 이 프로그래밍 모델을 사용하면 전체 복잡한 계층적 코드 베이스를 하위 모듈을 통해 병렬로 로드할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var UTIL = (함수 (상위, $) {
var my = parent.ajax = parent.ajax || My.get = 함수(url, params, 콜백) {
// 알겠습니다. 약간의 부정행위를 하고 있습니다 :)
          return $.getJSON(url, params, callback);
};
// 등등...
부모 반환;
}(UTIL || {}, jQuery));

이 기사에서는 "Javascript 모듈식 프로그래밍"의 최신 모범 사례를 요약하고 이를 실제로 적용하는 방법을 설명합니다. 입문용 튜토리얼은 아니지만, Javascript의 기본 구문을 조금만 이해하면 이해할 수 있습니다.