[JavaScript] 모듈 패턴(Module Pattern) 가장 흔한 디자인 패턴

Module Pattern는 자바스크립트에서 가장 흔한 디자인 패턴중 하나

 

코드를 캡슐화 시키기 쉬운 방법이다.

 

보통 싱글톤 방식으로 한번만 사용되도록 쓰인다.

 

모듈 만들기

쉽다, 함수에 괄호를 두르고, 뒤에 괄호를 하나더 써주면된다.

annoymous closure 이라고도 부르는듯 하다

(function() {
  'use strict';
  // Your code here
  // All function and variables are scoped to this function
})();

 

모듈 내보내기

그저 변수(myModule)에 집어넣는 일이다. 다음에 부를 수 있도록

var myModule = (function() {
  'use strict';

})();

 

그다음에 공개 메소드(publicMethod) 만들어서 오브젝트로 리턴해준다.

var myModule = (function() {
  'use strict';

  return {
    publicMethod: function() {
      console.log('Hello World!');
    }
  };
})();

myModule.publicMethod(); // 출력값 'Hello World'

 

프라이빗 메소드 & 프로퍼티

자바스크립트는 프라이빗 키워드가 기본적으로 없다,

하지만 closure 이용하면 만들기 가능

var myModule = (function() {
  'use strict';

  var _privateProperty = 'Hello World';

  function _privateMethod() {
    console.log(_privateProperty);
  }

  return {
    publicMethod: function() {
      _privateMethod();
    }
  };
})();

myModule.publicMethod(); // 출력값 'Hello World'
console.log(myModule._privateProperty); // is undefined protected by the module closure
myModule._privateMethod(); // is TypeError protected by the module closure

 

프라이빗 프로퍼티는 리턴을 안해주었기 때문에 밖에서 접근불가!

_privateMethod() 앞에 _는 자바스크립트가 프라이빗 키워드가 없으니까 붙여줘서 구분하기도 한다

 

 

원문: coryrylan.com/blog/javascript-module-pattern-basics JavaScript Module Pattern Basics (coryrylan.com)