JavaScript Module 모드의 전체 해석

소개
모듈 모드는 자바스크립트 프로그래밍에서 매우 통용되는 모드로 일반적인 상황에서 모두가 기본적인 사용법을 알고 있기 때문에 본고는 여러분에게 이 모드의 고급 사용 방식을 더 많이 보여 주려고 합니다.
우선 모듈 모드의 기본 특징을 살펴보겠습니다.

모듈식, 재사용 가능

변수와function을 봉인하여 전체적인namaspace와 접촉하지 않고 느슨하게 결합합니다

사용 가능한 퍼블릭 방법만 노출하고 다른 사유 방법은 모두 숨깁니다.

모듈 모델에 관해서는 최초로 YUI의 멤버 에릭 미라글리아가 4년 전에 이 개념을 제기했는데 우리는 간단한 예로 기본적인 용법을 설명할 것이다.
기본용법
먼저 가장 간단한 실현을 살펴보자. 코드는 다음과 같다.

var Calculator = function (eq) {
  // 

  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);

보시다시피 매번 사용할 때마다 new를 사용해야 합니다. 즉, 모든 실례는 메모리에copy입니다. 만약에 매개 변수를 전달할 필요가 없거나 특별한 까다로운 요구가 없다면 우리는 마지막} 뒤에 괄호를 붙여서 실행의 목적을 달성할 수 있습니다. 그러면 이 실례는 메모리에copy만 존재하지만 그의 장점을 보여주기 전에우선 이 모델의 기본적인 사용 방법을 봅시다.
익명 패키지
익명 패키지 닫기는 모든 것을 가능하게 하는 기초이고 자바스크립트의 가장 좋은 특성이기도 하다. 우리는 가장 간단한 패키지 함수를 만들 것이다. 함수 내부의 코드는 패키지 안에 계속 존재하고 전체 운행 주기 내에 이 패키지는 내부의 코드가 개인 상태에 있음을 보장한다.

(function () {
  // ...  function ， 
  // ... 
}());

주의, 익명 함수 뒤에 있는 괄호입니다. 이것은 자바스크립트 언어가 요구하는 것입니다. 만약 당신이 성명하지 않는다면, 자바스크립트 해석기는 기본적으로function 함수를 성명합니다. 괄호가 있습니다. 함수 표현식을 만드는 것입니다. 즉, 실행할 때 위와 같이 new에 사용하지 않아도 됩니다. 물론 당신도 이렇게 성명할 수 있습니다.

(function () {/*   */})();

그러나 우리는 첫 번째 방식을 사용하는 것을 추천합니다. 함수 자체 집행에 관해서는 제 뒤에 전문적인 문장이 있어서 상세하게 설명할 것입니다. 여기는 더 이상 말하지 않겠습니다.
참조 글로벌 변수
자바스크립트는 은식 전역 변수라는 특성이 있습니다. 변수가 사용되었든 안 사용되었든 자바스크립트 해석기는 작용역 체인을 거꾸로 옮겨 전체 변수의 var 성명을 찾습니다. var을 찾지 못하면 해석기는 이 변수가 전역 변수라고 가정합니다. 이 변수가 값 부여 작업에 사용되면 이전에 존재하지 않으면 해석기가 자동으로 생성합니다.이것은 바로 익명 패키지에서 전역 변수를 사용하거나 만드는 것이 매우 쉽다는 것이다. 그러나 비교적 어려운 것은 코드를 관리하기 어렵다는 것이다. 특히 코드를 읽는 사람들은 어떤 변수가 전역적인지, 어떤 변수가 국부적인지 구분하는 것을 많이 본다.
그러나 다행히도 익명 함수에서 우리는 비교적 간단한 대체 방안을 제공할 수 있다. 우리는 전역 변수를 하나의 매개 변수로 삼아 익명 함수에 전송한 후에 사용할 수 있다. 은식 전역 변수보다 뚜렷하고 빠르다. 예를 들어 다음과 같다.

(function ($, YAHOO) {
  //  ， jQuery ，YAHOO 
} (jQuery, YAHOO));

현재 많은 라이브러리에는 jQuery 원본 코드와 같은 사용 방식이 있다.
그러나 때로는 전역 변수를 사용하는 것이 아니라 전역 변수를 성명하고 싶을 수도 있다. 어떻게 해야 하는가?우리는 익명 함수의 반환 값을 통해 이 전역 변수를 되돌릴 수 있다. 이것은 바로 기본적인 모듈 모드로 완전한 코드를 볼 수 있다.

var blogModule = (function () {
  var my = {}, privateName = " ";

  function privateAddTopic(data) {
    //  
  }

  my.Name = privateName;
  my.AddTopic = function (data) {
    privateAddTopic(data);
  };

  return my;
} ());

위의 코드는 전역 변수 blogModule를 설명하고 접근 가능한 속성이 2개입니다. blogModule.AddTopic 및 blogModule.Name, 이외에 다른 코드는 익명 함수의 패키지에서 개인 상태를 유지합니다.또한 위에서 전역 변수를 전입한 예에 따라 우리는 다른 전역 변수를 편리하게 전입할 수 있다.
고급 용법
위의 내용은 대부분의 사용자에게 충분하지만, 우리는 이 모델을 바탕으로 더욱 강력하고 확장하기 쉬운 구조를 확대할 수 있다.
확장
모듈 모드의 한 가지 제한은 모든 코드를 하나의 파일에 써야 한다는 것이다. 그러나 일부 대형 프로젝트에서 하나의 기능을 여러 개의 파일로 분리하는 것은 매우 중요하다. 왜냐하면 여러 사람이 협력하여 개발하기 쉽기 때문이다.다시 고개를 돌려 위의 전역 파라미터 도입 예를 보면 블로그 모듈 자체를 전달할 수 있을까요?답은 확실합니다. 우리는 먼저 블로그 모듈을 전송하고 함수 속성을 추가한 다음에 되돌아오면 우리가 말한 목적을 달성할 수 있습니다. 코드:

var blogModule = (function (my) {
  my.AddPhoto = function () {
    //  
  };
  return my;
} (blogModule)); 

이 코드, C#에서 확장 방법이 있는 것 같지 않아요?좀 비슷하지만 본질은 달라요.또한 var는 필수적인 것이 아니지만 일치를 확보하기 위해 다시 사용했습니다. 코드가 실행된 후에 블로그 모듈의addPhoto는 사용할 수 있고 익명 함수 내부의 코드도 비밀성과 내부 상태를 보장합니다.
느슨한 결합 확장
위의 코드는 실행할 수 있지만 블로그 모듈을 먼저 설명한 다음에 위의 확장 코드를 실행해야 합니다. 즉, 절차가 흐트러져서는 안 됩니다. 이 문제를 어떻게 해결합니까?우리가 평소에 변수를 성명하는 것은 모두 이렇다는 것을 생각해 보자.

var cnblogs = cnblogs || {} ;

이것은 cnblogs 대상이 존재할 때 직접 사용하고 존재하지 않을 때 직접 값을 {}로 부여하는 것을 확보하는 것입니다. 이 특성을 이용하여 모듈 모드의 임의의 불러오는 순서를 어떻게 실현하는지 살펴보겠습니다.

var blogModule = (function (my) {

  //   
  
  return my;
} (blogModule || {})); 

이러한 코드를 통해 단독으로 분리된 모든 파일이 이 구조를 보증합니다. 그러면 우리는 임의의 순서로 불러올 수 있습니다. 따라서 이때의 var는 반드시 성명해야 합니다. 성명하지 않으면 다른 파일은 읽을 수 없습니다.
긴밀한 결합 확장
느슨한 결합의 확장은 매우 훌륭하지만, 예를 들어 당신의 속성이나 함수를 다시 쓸 수도 없고, 초기화할 때Module의 속성을 사용할 수도 없습니다.긴밀한 결합 확장은 로드 순서를 제한하지만 다음과 같은 예를 들어 다시 로드할 수 있는 기회를 제공합니다.

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));

이런 방식은 유연하지만 유연한 대가를 치러야 한다. 사실 이 대상의 속성 대상이나function은 복제되지 않고 같은 대상에 대한 인용이 많을 뿐이다. 그래서 만약에 옛 대상이 그것을 바꾸면 복제 이후의 대상이 가진 속성이나function 함수도 바뀐다. 이 문제를 해결하려면 우리는 귀속을 해야 하지만 귀속이 function 함수에 대한 부치도 좋지 않다.그래서 우리가 귀속할 때 eval에 상응하는 function.어쨌든, 나는 이 방식을 이 게시물에 넣었으니, 모두가 사용할 때 주의하면 된다.
다중 파일 공유 개인 대상
위의 예를 통해 알 수 있듯이 만약module가 여러 개의 파일로 분할된다면 모든 파일은 같은 구조를 보장해야 한다. 즉, 모든 파일 익명 함수 안의 개인 대상은 교차 접근할 수 없다. 그러면 우리가 굳이 사용하려면 어떻게 해야 합니까?우리는 먼저 코드 한 토막을 보았다.

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 || function () {
      my._private = _private;
      my._seal = _seal;
      my._unseal = _unseal;
    };

  return my;
} (blogModule || {}));

모든 파일에서 로컬 변수를 사용할 수 있습니다 _private는 속성을 설정하고 다른 파일에도 즉시 적용됩니다.이 모듈을 불러오는 것이 끝나면 응용 프로그램은 blogModule._seal () "자물쇠"를 누르면 외부의 내부 접속을 막습니다_private.만약 이 모듈이 다시 증식해야 한다면, 응용 생명주기 내에 모든 파일을 호출할 수 있습니다_unseal () 자물쇠를 열고 새 파일을 불러옵니다.로드 후 재호출_seal () 잠금
서브 모듈
마지막으로 가장 간단한 사용 방식은 하위 모듈을 만드는 것이다

blogModule.CommentSubModule = (function () {
  var my = {};
  // ...

  return my;
} ());

비록 매우 간단하지만, 나는 그것을 넣었다. 왜냐하면 내가 설명하고 싶은 것은 서브모듈도 일반 모듈의 모든 고급 사용 방식을 가지고 있기 때문이다. 즉, 너는 임의의 서브모듈에 대해 위의 응용 방법을 다시 사용할 수 있다는 것이다.
총결산
위의 대부분의 방식은 서로 조합하여 사용할 수 있는데 일반적으로 시스템을 설계하려면 느슨한 결합 확장, 개인 상태와 하위 모듈 같은 방식을 사용할 수 있다.그리고 저는 여기에서 성능 문제를 언급하지 않았지만 모듈 모델은 효율이 높고 코드가 적으며 적재 속도가 빠르다고 생각합니다.느슨한 결합 확장을 사용하여 병렬 불러오는 것을 허용하면 다운로드 속도를 더욱 높일 수 있다.그러나 초기화 시간은 좀 느릴 수 있지만 좋은 패턴을 사용하기 위해서는 가치가 있다.
다음은 JavaScript Module 모드를 전면적으로 해석하는 상세한 내용입니다. JavaScript Module 모드에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!