JavaScript에서 Revealing 모듈 패턴을 사용하는 방법

Question 1

이 게시물을 우연히 발견했습니다 : JavaScript의 Revealing Module Pattern . 내 프로젝트에서 이것을 사용하고 싶습니다.

내가 abc함수가 있고 기본 JavaScript 파일에서 해당 함수를 호출 한다고 가정 해 보겠습니다 .

이 패턴이 상황을 다르게 만들까요? 누구든지이 패턴의 기본 예를 보여줄 수 있습니까?

Question 2

작은 예 :

var revealed = function(){
   var a = [1,2,3];
   function abc(){
     return (a[0]*a[1])+a[2];
   }

   return {
      name: 'revealed',
      abcfn: abc
   }
}();

익명 함수 즉, 수득 개시 revealed값, a및 abc그 기능에 전용이다. 어떤 함수가 반환하는 것은와 객체 리터럴 name속성과 abcfn받는 사람에 대한 참조입니다 재산 abc function. 는 abc function민간 변수를 사용합니다 a. 이것은 클로저 의 사용 덕분에 가능합니다 (함수 범위 내의 모든 것은 동일한 함수의 다른 모든 것에 의해 참조 될 수 있습니다).

공개 된 사용법 :

alert(revealed.name);    //=> 'revealed'
alert(revealed.abcfn()); //=> 5 (1*2+3)

Question 3

DC = Douglas Crockford
RMP = 모듈 패턴 공개

DC와 RMP의 차이점은 주로 조직적이고 읽을 수 있습니다.

기사 자체에 예가 나와 있습니까? 그리고 정확히 무엇을 요구하고 있는가? 왜냐하면 그것들은 파일이 아니라 클로저와 관련이 있기 때문입니다.

모든 것을 클로저 (함수)에 넣고 접근하기를 원하는 부분 만 노출합니다. DC 스타일과 RMP의 차이는 RMP에 그들은 항상 같은 장소에서 정의하고 다음 나중에 동안 첫 번째 기능에 다른 장소에 정의되어 있다는 것입니다 밝혀 에 공공 객체 리터럴.

따라서 DC 및 RMP에는 다음이 있습니다.

비공개 부분 (변수 및 함수)을 정의 할 수있는 클로저
사적인 부분
공개적으로 표시되는 기능 및 변수 (상태)를 정의하는 공개 결과

이 두 패턴은 가독성 만 다릅니다. DC의 경우 특정 기능이 정의 될 위치를 항상 알 수는 없지만 RMP에서는 항상 모든 것이 비공개 부분에 있음을 알고 있습니다.

Question 4

공개 모듈 패턴은 초보자를위한 필수 자바 스크립트 디자인 패턴 문서에 잘 설명되어 있습니다.

Question 5

저자가 호출 한 "Douglas Crockford의 객체 생성 패턴"방법은 실제로 Richard Cornford 등이 주로 개발 한 모듈 패턴입니다 . http://groups.google.com/group/comp.lang.javascript/msg/9f58bd11bd67d937을 참조하세요.

예를 들어, 많이 있습니다. 다음 기사를 읽고 일부 링크를 따르십시오. http://peter.michaux.ca/articles/module-pattern-provides-no-privacy-at-least-not-in-javascript-tm

Question 6

모듈 패턴 의 이점으로 구조화 된 코드를 유지할 수 있도록 공개 모듈 패턴 과 싱글 톤 패턴을 혼합하여 사용하고 싶습니다 .

var MyFunction = function(){

    var _ = {
       Init: function(){
          _.Config.foo = "hello world";
       },
       Config:{
          foo:null
       },
       ShowAlert:function(){
          alert(_.Config.foo);
       }
    }

    return {
        Init: _.Init,
        ShowAlert: _.ShowAlert
    };
}();

MyFunction.Init();
MyFunction.ShowAlert();

내 블로그에 이에 대한 자세한 정보를 썼습니다.

http://curtistimson.co.uk/js/mixing-revealing-module-and-singleton-javascript-patterns/

Question 7

추가하고 싶을뿐입니다.이 패턴을 사용하면 전역 종속성을 인수 / 매개 변수로 전달하여 명시 적으로 지정하는 것이 좋습니다. 당신은 그것을 할 필요가 없지만 이것은 당신의 모듈이 첫눈에 무엇을 필요로하는지 매우 명확하게합니다. 예 :

var myModule = (function ($, loadModule) {
  "use strict";
})(jQuery, load);

이 예제에서는 첫 번째 줄에서 모듈이 jQuery 및 기능로드를 담당하는 다른 모듈을 사용하고 있음을 즉시 확인할 수 있습니다.

Question 8

모듈 외부의 코드에는 별 차이가 없습니다. 이 기사의 세 가지 경우 모두 메서드는 같은 방식으로 호출됩니다. 그러나 모듈 자체의 구조는 내부적으로 다릅니다.

Crockford의 모듈 패턴과 그들이 "공개 모듈 패턴"이라고 부르는 것은 구조적으로 거의 동일합니다. 유일한 차이점은 가독성을 높이기 위해 먼저 로컬 var에 메서드를 할당한다는 것입니다. 그러나 실제로 특별한 것은 없으며 링크에 몇 가지 예가 있습니다.

Question 9

Revealing Module의 기본 개념은 데이터와 동작 Object을 캡슐화 하는를 가지고 있다는 것입니다 .

var Module = (function(){
    var privateStuff = {};
    var publicStuff = {};

    return publicStuff;
})();

그러나이 패턴을 사용할 때 채택해야하는 몇 가지 모범 사례가 있습니다. 다음 Modulus은 데모를위한 몇 가지 속성 이있는 모듈 ( " ")입니다. 이러한 방법 중 일부를 사용합니다.

function AbstractSomeClass(id) {
    this.id = id;
    return this;
}

var Modulus = (new (function SomeClass() {
    var thus = this;

    function NameClass(name){
        this.value = thus.name || name;
    }

    AbstractSomeClass.call(this, 998);

    this.name = 'Touring';
    this.name = ( new NameClass('Hofstadter') ).value;

    return {
        id: this.id,
        name: this.name
    };
})());

통지 (new (function SomeClass(){ ... })());구문을. 사용하여 new다음과 같이 당신이 사용할 수 있습니다 this키워드 내부 폐쇄의를. 이는 다른 클래스 ( AbstractSomeClass.call(this, 998);) 에서 속성을 상속해야하는 경우에 유용합니다. 그러나 여전히 공개 하려는 속성 을 공개 해야합니다 . 예 :

return {
    id: this.id,
    name: this.name
};

또한 우리가 할당 this하는 것에 주목 thus하십시오-이것은 우리가 this자체 this범위 ( this.value = thus.name || name;) 를 가진 서브 클래스 내부 에서 Parent-를 사용할 수 있도록합니다.

다시 한 번, 이는 제안 된 규칙 및 모범 사례 중 일부에 불과합니다.

Question 10

다음은 모듈 패턴을 드러내는 작은 예입니다.

클래스처럼 private 및 public 함수를 선언 할 수있는 기능을 제공합니다.이 패턴의 주요 이점입니다. 전역에서 액세스 할 수있는 일부 기능을 공개하지 않으려면 비공개로 설정하고 나머지는 공개합니다. 개인 및 공용 함수를 만드는 방법의 예이며, 또 하나는 자체 실행 가능한 코드 블록입니다.

  var Calculator = (function () {

        var num1 = 10;
        var num2=5
        var _abc = function () {
            return num1 - num2;
        };

        var _mulFunc = function () {
            return num1 * num2;
        };

        var _divFunc = function () {
            return num1/num2;
        };

        return {
           //public scope
            abc: _abc,
            mulFunc:_mulFunc
         };

    })();

alert (Calculator.abc ()); 5를 반환합니다.

alert (Calculator.mulFunc ()); 50을 반환합니다.

그리고 __divFunc ()는 private 범위에 있으므로 액세스 할 수 없습니다. 공용 함수 표현이므로 return 객체 내부에 선언 된 함수 만 액세스 할 수 있습니다.

Question 11

https://www.realmelon.com/revealing-module-design-pattern-in-javaScript/

나는 그것에 대한 기사를 썼다.

당신은 이것을 볼 수 있습니다