집 > 기사 > 웹 프론트엔드 > JavaScript 모듈 패턴 자세히 설명

JavaScript 모듈 패턴 자세히 설명

小云云원래의: 2018-01-22 09:55:581661검색

이 글은 주로 JavaScript 모듈 모드를 소개하고, JS 모듈 모드의 관련 개념, 기능, 확장 및 기타 작동 기술을 예제 형식으로 자세히 분석하여 도움이 필요한 모든 분들께 도움이 되기를 바랍니다. .

JS에는 클래스 개념이 없는데, 객체의 Public 속성과 Private 속성을 어떻게 반영할 수 있을까요? 답은 모듈 패턴입니다.

JS의 중요한 특징은 익명 함수입니다. 익명 함수의 설정과 실행을 통해 익명 함수의 코드가 클로저를 형성하여 객체를 형성, 캡슐화 및 제어합니다. 전역 변수의 확산 및 다른 스크립트와의 충돌.

(function () {
  // 所有的变量和函数只在这个范围内有效
  // 仍然可以使用全局变量
}());

클래식 모듈 패턴 템플릿

var myNamespace = (function () {
 var myPrivateVar, myPrivateMethod;
 // A private counter variable
 myPrivateVar = 0;
 // A private function which logs any arguments
 myPrivateMethod = function( foo ) {
   console.log( foo );
 };
 return {
  // A public variable
  myPublicVar: "foo",
  // A public function utilizing privates
  myPublicFunction: function( bar ) {
   // Increment our private counter
   myPrivateVar++;
   // Call our private method using bar
   myPrivateMethod( bar );
  }
 };
})();

클로저를 통해 myNamespace를 사용할 때 myPublic* 및 myPrivate*의 속성과 메서드만 볼 수 있음을 알 수 있습니다. 메서드에 직접 액세스할 수 없습니다.

기본 모드 확장

믹스인 가져오기

JS에는 암시적 전역 변수라는 중요한 기능이 있습니다. 즉, JS 인터프리터가 변수에 대한 var 선언을 찾을 때마다 찾을 수 없으면 다음을 고려하세요. 이 변수는 전역 변수입니다. 이는 클로저에서 전역 변수를 사용할 때 수행하기 쉬운 일인 것처럼 보이지만 동시에 코드에서 쉽게 혼란을 야기할 수 있습니다. 다행스럽게도 익명 함수는 매개변수를 받을 수도 있으므로 매개변수 전달을 통해 사용하려는 전역 변수를 익명 함수에 가져올 수 있어 더욱 명확하고 깔끔한 사용 방법을 제공합니다.

(function ($, YAHOO) {
  // 这样就可以访问jQuery (as $) 和 YAHOO 库
}(jQuery, YAHOO));

모듈 내보내기

때때로 전역 변수를 사용할 뿐만 아니라 자신만의 전역 변수를 선언하고 싶을 때도 있습니다. 이는 익명 함수의 반환 값을 통해 쉽게 달성할 수 있습니다.

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

Advanced Extension

위의 기본 패턴을 바탕으로 계속 확장이 가능합니다.

Augmentation

기본 모듈 모드의 한계는 전체 모듈을 하나의 파일에 넣어야 한다는 것입니다. 그러면 모듈을 여러 파일에 분산시켜야 할 경우 어떻게 해야 할까요?

한 가지 방법은 모듈을 보강하는 것입니다. 먼저 모듈에 들어간 다음 속성 메소드를 추가하고 출력합니다. 예시는 다음과 같습니다

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

Loose Augmentation

위 예시에서는 먼저 모듈이 필요하고, 이를 기반으로 새로운 기능을 추가합니다. 하지만 JS 스크립트를 비동기적으로 로드하는 경우가 있으므로 낮은 결합 모듈 생성 방법이 필요하며 이는 다음 구조를 통해 달성할 수 있습니다.

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

Sub-modules

모듈을 기반으로 하위 모듈을 만들 수 있습니다. 예제는 다음과 같습니다.

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

지금까지 모듈 모드에 대해 간략하게 소개했습니다. 이는 다양한 JS 프레임워크에서 널리 사용되는 가장 고전적인 JS 패턴입니다. 이는 코드를 더욱 캡슐화하고 구조화하며 OOP를 향상시킵니다.

JavaScript 모듈 패턴 자세히 설명

관련 기사