JavaScript 시리즈에 대한 심층적 이해 (3) 모듈 mode_javascript 기술에 대한 종합 분석

소개
모듈 모드는 JavaScript 프로그래밍에서 매우 일반적인 모드입니다. 일반적으로 누구나 이 모드의 기본 사용법을 알고 있습니다.
먼저 모듈 패턴의 기본 기능을 살펴보겠습니다.
모듈형, 재사용 가능
변수와 함수를 캡슐화하고 전역 Namaspace와 접촉하지 않으며 느슨하게 결합됩니다
노출만 가능 public 메소드는 모두 숨겨집니다
Module 모드에 관해서는 이 개념이 4년 전 YUI의 멤버인 Eric Miraglia에 의해 처음 제안되었습니다. 매우 잘 알고 있으므로 이 섹션을 무시하십시오.)
기본 사용법
가장 간단한 구현부터 살펴보겠습니다. 코드는 다음과 같습니다.

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

var Calculator = function (eq) {
//여기서 private 멤버를 선언할 수 있습니다.
var eqCtl = document.getElementById(eq); >return {
// 공개 멤버
add: function (x, y) {
var val = x y
eqCtl.innerHTML = val; 🎜>};


다음과 같은 방법으로 호출할 수 있습니다:

코드 복사

var Calculator = new Calculator('eq'); calculator.add(2, 2)

본 적이 있을 것입니다. 사용할 때마다 새로워져야 합니다. 즉, 각 인스턴스는 메모리의 복사본입니다. 매개변수를 전달할 필요가 없거나 특별한 엄격한 요구 사항이 없으면 마지막 뒤에 대괄호를 추가할 수 있습니다. } 자체 실행의 목적을 달성하기 위해 메모리에는 인스턴스의 복사본이 하나만 존재하지만 장점을 보여주기 전에 이 모드의 기본 사용법을 살펴보겠습니다.
익명 클로저
익명 클로저는 모든 것을 가능하게 하는 기초이며, 이는 JavaScript의 가장 간단한 기능이기도 합니다. 함수 내부의 코드는 전체 동안 항상 존재합니다. 실행 주기 동안 이 클로저는 내부 코드가 비공개 상태에 있음을 보장합니다.

코드 복사

코드는 다음과 같습니다. (function () { / / .. . 모든 변수와 함수는 여기에서 선언되며 범위는 이 익명 클로저 내에만 있을 수 있습니다.

// ...그러나 여기의 코드는 여전히 외부 전역 개체에 액세스할 수 있습니다

}()); >

익명 함수 뒤의 괄호는 JavaScript 언어에서 필요합니다. 선언하지 않으면 JavaScript 인터프리터는 기본적으로 괄호가 있으면 함수를 생성하기 때문입니다. 표현식, 즉 자체 실행됩니다. 물론 위와 같이 new를 사용할 필요는 없습니다.
(함수() {/* 내부 코드) /})();
하지만 첫 번째 방법을 사용하는 것이 좋습니다. 함수 자체 실행에 대해서는 나중에 자세히 설명할 기사가 있으므로 여기서는 자세히 설명하지 않겠습니다.
전역 변수 참조

자바스크립트에는 변수 사용 여부에 관계없이 전체 변수의 var 선언을 찾기 위해 범위 체인을 역순으로 탐색하는 기능이 있습니다. var를 찾을 수 없습니다. 설명 인터프리터는 해당 변수가 전역 변수라고 가정합니다. 변수가 할당 작업에 사용되는 경우 해당 변수가 이전에 존재하지 않으면 인터프리터가 해당 변수를 자동으로 생성하므로 사용하기가 매우 쉽습니다. 또는 익명 클로저에서 전역 변수를 생성할 수 있지만 더 어려운 점은 코드를 관리하기 어렵다는 것입니다. 특히 코드를 읽는 사람이 어떤 변수가 전역 변수이고 어느 변수가 로컬 변수인지에 대한 많은 구별을 볼 때 더욱 그렇습니다.
다행히도 익명 함수에서 비교적 간단한 대안을 제공할 수 있습니다. 전역 변수를 익명 함수에 매개변수로 전달한 다음 이를 사용할 수 있으며 암시적 전역 변수와 비교하면 더 명확하고 빠릅니다. :




코드 복사

코드는 다음과 같습니다. (function ($, YAHOO ) { // 여기서 우리 코드는 전역 jQuery 개체를 사용할 수 있으며 YAHOO도 마찬가지입니다 } (jQuery, YAHOO))

요즘에는 이러한 클래스 라이브러리가 많이 있습니다. jQuery 소스 코드와 같은 사용 방법.
그러나 때로는 전역 변수를 사용하고 싶을 뿐만 아니라 전역 변수를 선언하고 싶을 수도 있습니다. 어떻게 해야 할까요? 기본 모듈 모드인 익명 함수의 반환 값을 통해 이 전역 변수를 반환할 수 있습니다. 전체 코드를 살펴보겠습니다.

코드 복사

코드는 다음과 같습니다.

var blogModule = (function () {
var my = {}, privateName = "Blog Park";
function privateAddTopic(data) {
//내부 처리 코드는 다음과 같습니다.
}
my.Name = privateName;
my.AddTopic = function (data) {
privateAddTopic(data)
};
return my; ) ;

위 코드는 blogModule.AddTopic 및 blogModule.Name이라는 2개의 액세스 가능한 속성을 사용하여 전역 변수 blogModule을 선언합니다. 또한 다른 코드는 비공개 상태를 유지합니다. 동시에 위의 전역 변수 전달 예에 따르면 다른 전역 변수도 쉽게 전달할 수 있습니다.
고급 사용법
위 내용은 대부분의 사용자에게 충분하지만, 이 패턴을 기반으로 보다 강력하고 확장하기 쉬운 구조를 확장할 수도 있습니다.
확장
모듈 모드의 한 가지 제한 사항은 모든 코드를 하나의 파일에 작성해야 한다는 것입니다. 그러나 일부 대규모 프로젝트에서는 여러 사람이 쉽게 개발할 수 있기 때문에 함수를 여러 파일로 분리하는 것이 매우 중요합니다. 사람들. . 위의 전역 매개변수 가져오기 예제를 되돌아보면 blogModule 자체를 전달할 수 있습니까? 대답은 '예'입니다. 먼저 blogModule을 전달하고 함수 속성을 추가한 다음 이를 반환하여 앞서 말한 목적을 달성합니다.

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

var blogModule = (function (my) {
my.AddPhoto = function () {
//내부 추가 code
};
return my;
} (blogModule))

이 코드는 C#의 확장 메서드처럼 보입니까? 다소 유사하지만 본질적으로 다릅니다. 동시에 var는 필요하지 않지만 일관성을 보장하기 위해 다시 사용합니다. 코드가 실행된 후에도 blogModule 아래의 AddPhoto를 사용할 수 있습니다. 동시에 익명 함수 내부의 코드는 여전히 개인 정보 보호 및 내부 상태를 보장합니다.
느슨하게 결합된 확장
위 코드는 실행 가능하지만 blogModule을 먼저 선언한 후 위 확장 코드를 실행해야 합니다. 즉, 이 문제를 어떻게 해결할 수 있을까요? 일반적으로 다음과 같이 변수를 선언한다는 점을 기억해 봅시다.
var cnblogs = cnblogs ||
이것은 cnblogs 객체가 존재할 때 직접 사용되고, 존재하지 않을 때 직접 사용되도록 하기 위한 것입니다. {}, 이 기능을 사용하여 모듈 모드에서 로드 순서를 구현하는 방법을 살펴보겠습니다.

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

var blogModule = (function (my) {
// 일부 기능 추가
return my;
} (blogModule || {}))

이 코드를 사용하면 각 개별 파일이 이 구조를 보장하므로 어떤 순서로든 로드할 수 있습니다. 따라서 var를 선언하지 않으면 다른 파일에서 읽을 수 없기 때문에 이때 선언해야 합니다. 그것.
강하게 결합된 확장
느슨하게 결합된 확장은 훌륭하지만 몇 가지 제한 사항이 있을 수 있습니다. 예를 들어 일부 속성이나 함수를 다시 작성할 수 없으며 초기화 중에 모듈 속성을 사용할 수 없습니다. 밀접하게 결합된 확장 프로그램은 로드 순서를 제한하지만 오버로드할 수 있는 기회를 제공합니다. 다음 예를 참조하세요.

코드 복사 코드

var blogModule = (function (my) {
var oldAddPhotoMethod = my.AddPhoto;
my.AddPhoto = function () {
// 오버로드된 메서드 , 여전히 사용 가능 oldAddPhotoMethod
};
return my;
} (blogModule))

이런 방식으로 우리는 물론 내부적으로 원래 속성을 계속 사용하려면 oldAddPhotoMethod를 호출하여 사용할 수 있습니다.
복제 및 상속

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

var blogModule = (function ( old) {
var my = {},
key;
for (key in old) {
if (old.hasOwnProperty(key)) {
my[key] = old[ key];
}
}
var oldAddPhotoMethod = old.AddPhoto;
my.AddPhoto = function() {
// 복제 후 다시 작성되었습니다. 물론 계속해서 oldAddPhotoMethod
}라고 부를 수 있습니다.
return my
} (blogModule));
이 방법은 유연하지만 유연성도 필요합니다. 사실 속성 개체나 개체의 기능이 전혀 복사되지 않고 동일한 개체에 대한 참조가 하나 더 있을 뿐이므로 이전 개체가 변경하면 , 복제된 객체가 소유한 속성이나 함수도 변경됩니다. 이 문제를 해결하려면 재귀를 사용해야 하지만 함수 할당에 재귀를 사용하는 것이 쉽지 않으므로 함수를 재귀할 때 이에 따라 평가합니다. 어쨌든 이 방법을 이 포스팅에 넣어두었기 때문에 모두가 주의해서 사용할 수 있습니다.
파일 간 비공개 개체 공유
위의 예를 통해 모듈이 여러 파일로 분할되는 경우 각 파일은 동일한 구조, 즉 익명 함수의 비공개 개체를 보장해야 한다는 것을 알 수 있습니다. 각 파일은 교차 접근도 불가능합니다. 그런데 사용해야 한다면 어떻게 해야 할까요? 먼저 코드를 살펴보겠습니다.

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

var blogModule = (function ( my) {
var _private = my._private = my._private || {},
_seal = my._seal = my._seal || function () {
delete my ._private;
delete my._seal;
delete my._unseal;
},
_unseal = my._unseal = my._unseal || 함수 ;
my._seal = _seal;
};
return my;

🎜>모든 파일은 로컬 변수 _private에 속성을 설정하며 설정은 다른 파일에 즉시 적용됩니다. 이 모듈이 로드되면 애플리케이션은 blogModule._seal()을 호출하여 모듈을 "잠금"으로써 내부 _private에 대한 외부 액세스를 방지합니다. 이 모듈을 다시 생성해야 하는 경우 _unseal()을 호출하여 응용 프로그램 수명 주기 동안 모든 파일을 "잠금 해제"한 다음 새 파일을 로드할 수 있습니다. 로드한 후 _seal()을 다시 호출하여 "잠금"하십시오.
서브 모듈
이를 사용하는 마지막이자 가장 쉬운 방법은 서브 모듈을 만드는 것입니다

코드 복사

코드는 다음과 같습니다. 다음과 같습니다: blogModule.CommentSubModule = (function () { var my = {};

// ...

return my;
} () );


아주 간단하지만 서브모듈에도 일반 모듈의 고급 사용법이 모두 담겨 있어 어떤 서브모듈이든 다시 사용할 수 있다는 점을 설명하고 싶어서 넣었습니다. 위의 방법.
요약
위의 방법들은 대부분 서로 조합하여 사용할 수 있습니다. 일반적으로 시스템을 설계하려면 느슨하게 결합된 확장, 프라이빗 상태, 서브모듈 등의 방법을 사용할 수 있습니다. 그리고 여기서는 성능 문제를 언급하지 않았지만 모듈 모드가 효율적이고, 코드도 적고, 로딩 속도도 빠른 것 같아요. 느슨한 결합 확장을 사용하면 병렬 로딩이 가능해 다운로드 속도가 향상될 수 있습니다. 초기화 시간은 느려질 수 있지만 좋은 패턴을 사용하는 것이 좋습니다.

참고 기사:
http://yuiblog.com/blog/2007/06/12/module-pattern/
http://www.adequatelygood.com/2010/3/JavaScript-Module- 심층 패턴
동기화 및 추천
이 기사는 디렉토리 색인에 동기화되었습니다: JavaScript 시리즈에 대한 심층적 이해
원본, 번역, 재인쇄를 포함한 JavaScript 시리즈 기사에 대한 심층적 이해 그리고 다른 유형의 기사가 도움이 되었다면 삼촌이 글을 쓸 동기를 부여할 수 있도록 추천하고 지원해 주세요.