JS 모듈 모드 사용에 대한 자세한 설명

이번에는 JS 모듈 모드 사용에 대해 자세히 설명하겠습니다. JS 모듈 모드 사용 시 주의 사항은 무엇인가요?

JS에는 클래스 개념이 없는데 Object의 Public 및 Private 속성을 어떻게 반영할 수 있을까요? 답은 모듈 패턴(Module Pattern)입니다.

JS에는 주목할만한 기능이 있습니다: 익명 기능(익명 함수), 익명 함수의 설정 및 실행을 통해 익명 함수의 코드는 클로저를 형성하여 개체의 개인 및 공용 특성을 형성, 캡슐화 및 제어하여 전역 변수의 확산 및 다른 스크립트 충돌과의 충돌을 방지합니다. .

rreee

클래식 모듈 패턴 템플릿

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

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

기본 모드 확장

믹스인 가져오기

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

rreee

모듈 내보내기

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

rreee

프리미엄 확장

위의 기본 패턴을 바탕으로 계속해서 확장해 나갈 수 있습니다.

증대

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

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

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

느슨한 확대

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

rreee

하위 모듈

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

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

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Vue 로딩 순서를 작동하는 방법

선 교차를 금지하도록 BootStrap 제목을 설정하는 방법

위 내용은 JS 모듈 모드 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!