JavaScript 의 Module 모드 프로 그래 밍 깊이 분석

기초 지식
우선 우 리 는 모듈 모드(2007 년 YUI 의 Eric Miraglia 가 블 로그 에서 제기 한 것)를 대충 알 아야 한다.모듈 모드 에 익숙 하 다 면 이 부분 을 뛰 어 넘 고'고급 모드'를 직접 읽 을 수 있다.
익명 함수 패키지
익명 함수 패 키 지 는 자 바스 크 립 트 의 가장 좋 은 특징 으로 하나 도 없 으 며 모든 것 을 가능 하 게 하 는 것 입 니 다.이제 익명 함 수 를 만 들 고 바로 실행 하 겠 습 니 다.함수 에서 모든 코드 는 하나의 패 킷 에서 실 행 됩 니 다.패 킷 은 전체 실행 과정 에서 이 코드 들 의 사유 성과 상 태 를 결정 합 니 다.

(function () {
 // ... all vars and functions are in this scope only
 // still maintains access to all globals
}());

익명 함수 밖의 괄호 에 주의 하 세 요.이것 은 자바 스 크 립 트 에서 function 으로 시작 하 는 문 구 는 일반적으로 함수 성명 으로 여 겨 지기 때문이다.바깥 괄호 를 넣 으 면 함수 표현 식 을 만 듭 니 다.
전역 가 져 오기
자 바스 크 립 트 는 숨겨 진 전역 변수 라 는 특징 이 있 습 니 다.변수 이름 이 사용 되면 컴 파일 러 는 이 변수의 문 구 를 var 로 설명 하 는 것 을 상부 에 조회 합 니 다.만약 찾 지 못 했다 면 이 변 수 는 전역 적 인 것 으로 여 겨 질 것 이다.값 을 부여 할 때 이렇게 사용 하면 전역 적 인 역할 영역 을 만 들 수 있 습 니 다.이것 은 익명 의 패키지 에서 전역 변 수 를 만 드 는 것 이 매우 쉽다 는 것 을 의미한다.불 행 히 도 이 로 인해 코드 를 관리 하기 어 려 울 것 입 니 다.프로그래머 에 게 전체적인 변수 가 한 파일 에 설명 되 지 않 으 면 분명 하지 않 기 때 문 입 니 다.다행히도 익명 함 수 는 우리 에 게 또 다른 선택 을 주 었 다.우 리 는 전역 변 수 를 익명 함수 의 매개 변 수 를 통 해 코드 에 가 져 올 수 있 습 니 다.이렇게 하면 더욱 빠 르 고 깨끗 합 니 다.

(function ($, YAHOO) {
// now have access to globals jQuery (as $) and YAHOO in this code
}(jQuery, YAHOO));

모듈 내 보 내기
때때로 전역 변 수 를 사용 하고 싶 지 는 않 지만,그들 을 설명 하고 싶 습 니 다.우 리 는 익명 함수 의 반환 값 을 통 해 그들 을 쉽게 내 보 낼 수 있다.모듈 모드 의 기본 내용 이 이렇게 많은 데,여기에 복잡 한 예 가 하나 있다.

var MODULE = (function () {
 var my = {},
  privateVariable = 1;
 function privateMethod() {
  // ...
 }
 my.moduleProperty = 1;
 my.moduleMethod = function () {
  // ...
 };
 return my;
}());

여기 서 우 리 는 전체적인 module 을 MODULE 이 라 고 발 표 했 는데 두 가지 공유 속성 이 있 습 니 다.하 나 는 MODULE.moduleMethod 라 는 방법 과 MODULE.moduleProperty 라 는 변수 입 니 다.또한 그 는 익명 함수 의 패 킷 을 통 해 개인 적 인 내부 상 태 를 유지 할 수 있 습 니 다.물론 앞에서 언급 한 모델 을 사용 하여 필요 한 전역 변 수 를 쉽게 가 져 올 수 있 습 니 다.
고급 모드
이전에 언급 한 내용 은 이미 많은 수 요 를 만족 시 킬 수 있 지만 우 리 는 이런 모델 을 더욱 깊이 연구 하여 강력 하고 확장 가능 한 구 조 를 창조 할 수 있다.조금씩,계속해서 이 MODULE 이라는 모듈 을 통 해 배 웁 시다.
넓히다
현재 모듈 모드 의 한 계 는 전체 모듈 이 하나의 파일 에 써 야 한 다 는 것 이다.대규모 코드 개발 을 한 사람 은 한 파일 을 여러 파일 로 분리 하 는 것 이 중요 하 다 는 것 을 안다.다행히 우 리 는 modules 를 확장 하 는 좋 은 방법 이 있다.우선 모듈 을 가 져 온 다음 속성 을 추가 하고 마지막 으로 내 보 냅 니 다.여기 서 이 예 는 바로 위 에서 말 한 방법 으로 MODULE 을 확대 하 는 것 이다.

var MODULE = (function (my) {
 my.anotherMethod = function () {
  // added method...
 };
 return my;
}(MODULE));

필요 없 지만 일치 성 을 위해 var 키 워드 를 다시 사용 합 니 다.그리고 코드 를 실행 하면 module 은 MODULE.anotherMethod 라 는 공유 방법 을 추가 합 니 다.이 확장 파일 역시 개인 적 인 내부 상태 와 가 져 오기 상 태 를 유지 하고 있다.
느슨하게 넓히다
우리 위의 그 예 는 우리 가 먼저 모듈 을 만 든 다음 에 모듈 을 확장 해 야 한다.이것 은 반드시 필요 한 것 이 아니다.비동기 로드 스 크 립 트 는 자바 script 응용 성능 을 향상 시 키 는 가장 좋 은 방법 중 하나 입 니 다.느슨 한 확장 을 통 해 우 리 는 유연 한 것 을 만 들 고 여러 파일 로 나 눌 수 있 는 module 을 만 들 수 있 습 니 다.각 파일 의 구 조 는 대체로 다음 과 같다.

var MODULE = (function (my) {
 // add capabilities...
 return my;
}(MODULE || {}));

이런 모델 에서 var 문 구 는 필수 적 이다.가 져 온 module 이 존재 하지 않 으 면 생 성 됩 니 다.이것 은 LABjs 와 유사 한 도구 로 모듈 의 파일 을 병렬 로 불 러 올 수 있다 는 것 을 의미한다.
급히 넓히다
느슨 한 확장 은 이미 훌륭 하지만,그것 도 당신 의 모듈 에 약간의 한 계 를 더 해 주 었 습 니 다.가장 중요 한 것 은 모듈 의 속성 을 안전하게 다시 쓸 수 없다 는 것 입 니 다.초기 화 할 때 다른 파일 의 모듈 속성 을 사용 할 수 없습니다.(단,초기 화 후에 실행 할 수 있 습 니 다.)확장 은 일정한 불 러 오 는 순 서 를 포함 하지만 재 작성 을 지원 합 니 다.다음은 하나의 예 입 니 다(우리 최초의 MODULE 을 확장 하 였 습 니 다).

var MODULE = (function (my) {
 var old_moduleMethod = my.moduleMethod;
 my.moduleMethod = function () {
  // method override, has access to old through old_moduleMethod...
 };
 return my;
}(MODULE));

여기 서 우 리 는 이미 MODULE.moduleMethod 를 다시 썼 고 수요 에 따라 원시 적 인 방법 에 대한 인용 도 보류 했다.
복제 와 계승

var MODULE_TWO = (function (old) {
 var my = {},
  key;
 for (key in old) {
  if (old.hasOwnProperty(key)) {
   my[key] = old[key];
  }
 }
 var super_moduleMethod = old.moduleMethod;
 my.moduleMethod = function () {
  // override method on the clone, access to super through super_moduleMethod
 };
 return my;
}(MODULE));

이런 모델 은 아마도 가장 융통성 이 없 는 선택 일 것 이다.우아 한 합병 을 지 지 했 지만 그 대 가 는 민첩 성 을 희생 한 것 이다.우리 가 쓴 코드 에 서 는 대상 이나 함수 의 속성 이 복사 되 지 않 고 한 대상 의 두 인용 형식 으로 만 존재 합 니 다.하 나 는 변 하고,다른 하 나 는 변 한다.대상 에 게[g5],우 리 는 재 귀적 인 복제 작업 을 통 해 해결 할 수 있 지만,함수 에 대해 서 는 방법 이 없다.eval 을 제외 하고.그러나 완전 성 을 위해 나 는 그것 을 포함 했다.크로스 파일 의 개인 상태
하나의 module 를 여러 파일 로 나 누 는 데 큰 한계 가 있 습 니 다.모든 파일 이 자신의 개인 상 태 를 유지 하고 다른 파일 의 개인 상 태 를 얻 을 수 없습니다.이것 은 해결 할 수 있 는 것 이다.아래 의 이 느슨 한 예 는 서로 다른 문서 에서 사유 상 태 를 유지 할 수 있다.

var MODULE = (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 || function () {
   my._private = _private;
   my._seal = _seal;
   my._unseal = _unseal;
  };
 // permanent access to _private, _seal, and _unseal
 return my;
}(MODULE || {}));

모든 파일 은 개인 변 수 를 위 한private 설정 속성,기타 파일 은 즉시 호출 할 수 있 습 니 다.module 로 딩 이 완료 되면 프로그램 은 MODULE 을 호출 합 니 다.seal(),외부 에서 내부 에 접근 할 수 없 게 하 는.private。이후 module 이 다시 확장 하려 면 어떤 속성 이 바 뀌 어야 합 니 다.새 파일 을 불 러 오기 전에 모든 파일 을 호출 할 수 있 습 니 다.unsea(),코드 가 실 행 된 후에 호출 합 니 다.seal。
이 모델 은 내 가 오늘 일 하면 서 생각 한 것 으로 나 는 다른 곳 에서 본 적 이 없다.그러나 나 는 이것 이 매우 유용 한 모델 이 므 로 단독으로 쓸 만하 다 고 생각한다.
Sub-modules
마지막 고급 모드 는 실제로 가장 간단 합 니 다.하위 모듈 을 만 드 는 예 가 많 습 니 다.일반적인 모듈 을 만 드 는 것 과 같 습 니 다.

MODULE.sub = (function () {
 var my = {};
 // ...
 return my;
}());

비록 이것 은 매우 간단 할 수 있 지만,나 는 이것 이 쓸 만 한 가치 가 있다 고 결정 했다.서브 모듈 은 일반적인 모듈 의 모든 양질 의 특성 을 가지 고 있 으 며 확장 과 사유 상 태 를 포함한다.
총결산
대부분의 고급 모델 은 서로 조합 하여 더욱 유용 한 새로운 모델 을 만 들 수 있다.만약 에 저 에 게 복잡 한 응용 방법 을 제시 하 라 고 하 시 면 저 는 소나무 확장,개인 상태,그리고 서브 모듈 과 결합 하 겠 습 니 다.
여기 서 나 는 성능 과 관련 된 일 을 언급 하지 않 았 지만,모듈 모드 는 성능 향상 에 좋다 고 말 할 수 있다.그것 은 코드 의 양 을 줄 일 수 있 기 때문에 코드 의 불 러 오 는 것 이 더욱 빠르다.느슨 한 확장 은 병렬 로드 를 가능 하 게 합 니 다.이것 은 같은 로드 속 도 를 향상 시 킵 니 다.초기 화 하 는 시간 이 다른 방법 보다 길 수 있 지만 시간 이 많이 걸 리 는 것 은 가치 가 있다.전역 변수 가 올 바 르 게 가 져 오 면 실행 할 때 문제 가 되 지 않 습 니 다.하위 module 에 서 는 변수 에 대한 참조 체인 이 짧 아 지면 속 도 를 높 일 수 있 습 니 다.
마지막 으로 이것 은 키 module 자체 의 동적 로드 예(존재 하지 않 으 면 생 성)입 니 다.소 개 를 위해 내부 상 태 를 고려 하지 않 았 지만 고려 하 더 라 도 간단 합 니 다.이 모드 는 하위 모듈 과 다른 모든 것 을 포함 하여 복잡 하고 다 차원 적 인 코드 를 병행 적 으로 불 러 올 수 있 습 니 다.

var UTIL = (function (parent, $) {
 var my = parent.ajax = parent.ajax || {};
 my.get = function (url, params, callback) {
  // ok, so I'm cheating a bit 
  return $.getJSON(url, params, callback);
 };
 // etc...
 return parent;
}(UTIL || {}, jQuery));

나 는 이 내용 들 이 유용 하 기 를 바 랍 니 다.아래 에 메 시 지 를 남 겨 서 당신 의 생각 을 공유 하 세 요.소년 들 아,노력 해라.더 좋 은,더 모듈 화 된 자 바스 크 립 트 를 써 라.
왕 씨