> 웹 프론트엔드 > JS 튜토리얼 > JavaScript의 모듈 식 디자인 패턴

JavaScript의 모듈 식 디자인 패턴

Christopher Nolan
풀어 주다: 2025-02-25 19:44:22
원래의
859명이 탐색했습니다.

Modular Design Patterns in JavaScript

코어 포인트

회원 유형 이해 :
    javaScript의 공개, 민간, 특권 및 보호 회원의 차이점은 각각 모듈 내의 속성 및 방법에 대한 다양한 수준의 액세스 및 보안을 제공합니다.
  • 모듈 모드 변형 : 기본 모듈 모드와 공개 모듈 모드 간의 뉘앙스에 대해 배우면서 일관된 내부 코딩 스타일과 공개의 유연한 제어를 제공합니다. 권한있는 회원 사용 :
  • 권한있는 멤버를 사용하여 공개 방법을 통해 개인 변수를 안전하게 노출시켜 캡슐화를 유지하면서 제어 된 액세스를 허용합니다.
  • 회원 정책을 보호 : 는 제어 된 범위 내에서 데이터를 일시적으로 노출시킨 다음 비공개 데이터로 되돌아 가서 외부 액세스없이 여러 모듈간에 데이터를 공유하여 JavaScript의 보호를 활성화합니다.
  • 강화 된 기술 : 추가 모듈을 단일 컨텍스트로 바인딩하기 위해 와 같은 방법을 탐색하여 공유 상태 및 관리를 달성하면서 모듈 독립성 및 관리 가능성을 유지합니다.
  • 이 기사는 4 가지 주요 멤버 유형을 포함하는 확장 모듈 설계 패턴의 구조와 장점을 설명합니다. 공개 회원 :
  • 멤버는 어디서나 접근 할 수 있습니다.
  • 개인 회원 : 객체 내에서만 액세스 할 수있는 멤버. apply() 개인 회원 :
  • 객체에서 직접 액세스 할 수는 있지만 공개 방법
를 통해 외부에서 간접적으로 액세스 할 수있는 회원.

멤버 보호 :
    내부 물체 나 모듈에서만 액세스 할 수있는 멤버.
  • 이 기사는 객체 지향 프로그래밍에 관한 것이 아닙니다. 왜냐하면 우리가 생성 할 구조는 싱글 톤 패턴이기 때문에 여러 번 인스턴스화 할 수없는 단일 인스턴스 구조입니다. 실제로, 그것은 생성자를 소유하는 관점에서 전혀 인스턴스화되지 않으므로 객체 지향 패턴이 아닌 객체 기반 패턴입니다. 객체 기반 및 객체 지향 프로그래밍의 차이점과 JavaScript에서 객체 지향 프로그래밍 소개에 대한 자세한 내용은 Ryan Frishberg의 기사 : JavaScript 객체 지향 프로그래밍을 읽는 것이 좋습니다.
  • 모듈 식 디자인 패턴
  • 는 여기에서 기본 디자인 패턴으로 사용됩니다.이 패턴은 클래식 모듈 패턴의 변형이지만 더 많은 제어 기능을 갖습니다. 꽤 많은 기사가 이러한 패턴을 설명했지만 실제로 어떻게 작동하는지 설명하는 사람은 거의 없으며 완전한 기능 세트를 가진 사람은 거의 없습니다! 기본 모듈 모드 클래식 모듈 패턴은 반환시 단일 변수에 할당 된 익명 함수 리터럴로 스크립트의 모든 코드를 랩합니다. 함수 리터럴은 자체를 호출하는 함수이므로 함수 리터럴의 최종 할당은 함수가 아니라 함수에 의해 리턴되는 값입니다. 간단한 예를 들어, 함수 리터럴에는 계산이 포함되어 있으므로 합에 할당 된 값은 해당 계산의 결과입니다.

    이 구문의 의미를 설명하기 위해 다음은 동일한 코드이며 이름이 지정된 함수로 추상화됩니다.

    이 경우 실제로 주위에 괄호를 넣을 필요는 없지만 익명 기능을 사용할 때는 사전 할당없이 단일 표현식으로 평가하기 위해서는해야합니다.
    var sum = (function() { return 6 * 7; })();
    로그인 후 복사

    <<> 공공 및 민간 회원 <🎜 🎜>

    따라서 함수 리터럴에서는 변수, 속성 및 기능과 같은 다른 코드를 넣을 수 있으며 내부 데이터를 정의하는 데 사용되는 다양한 유형의 구문이 공개 구성원과 개인 구성원 간의 분할을 결정합니다. 예는 다음과 같습니다.
    function calculate() { return 6 * 7; }
    var sum = (calculate)();
    로그인 후 복사
    우리는 속성 객체를 반환하고 객체가

    에 할당되기 때문에 <🎜 🎜> 및 calculate와 같은 객체 외부에서 이러한 속성에 액세스 할 수 있습니다. 그러나 변수는 원래 범위 내에서만 액세스 할 수 있기 때문에 단순히 또는

    에 액세스 할 수 없습니다. 변수의 범위는

    문에 의해 결정된 컨텍스트를 정의하는 것입니다. 이 예에서 개인 변수의 범위는 객체이므로 해당 객체 내에서만 액세스 할 수 있습니다. <🎜 🎜> <<> 공개 모듈 모드

    모듈 모드를 사용하여 두 가지 다른 구문을 사용하여 공공 회원과 개인 회원의 차이를 만듭니다. 모듈 패턴을 드러내는 것은이 패턴의 변형으로, 모든 내부 구조에 대해 동일한 구문을 사용할 수 있으며, 끝의 객체 문자 그럴 표기법으로 만 공개 멤버를 연기합니다. 그 객체를 다시 보자. 그러나 이번에는 공개 모듈 모드를 사용하여 : 공공 회원과 민간 회원 사이의 구분은 여전히 ​​동일하지만 이번에는 이들이 이러한 멤버를 정의하는 데 사용되는 원래 구문에 의해 구현되지 않고 단순히 반환 된 컨텐츠에 의해 구현됩니다. 이렇게하면 내부적으로 일관된 코딩 스타일을 사용할 수 있으므로 공개 모듈 패턴을 유용한 변형으로 만듭니다. 또한 돌아올 때 공개 회원의 이름을 변경하고 언제든지 공개 회원이 될 수 있습니다. 이 패턴은 그의 기사 에서이 패턴과 기본 모듈 패턴을 설명한 Christian Heilmann이 혁신했습니다.

    <<>
    var MyModule = (function() {
      var myPrivateData = 303;
      function myPrivateFunction() {
        alert('private');
      }
      return {
        myPublicData : 42,
        myPublicFunction : function() {
          alert('public');
        }
      };
    })();
    로그인 후 복사
    (기사의 길이로 인해 다음 내용이 세그먼트에서 출력됩니다)

위 내용은 JavaScript의 모듈 식 디자인 패턴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿