[JavaScript] Module 패턴. 모듈패턴

The Module Pattern

오늘은 자바스크립트의 모듈패턴!!! 에 대해 글을 써보도록 하지.

나도 공부하는 초초초초초 왕 초보 개발자 이므로 쉽게 되도록 쉽게 이해한 내용을 바탕으로 설명함.

모듈 패턴의 정의!

모듈패턴은 전에 포스팅했던 네임스페이스패턴처럼 전역스페이스를 더럽히지않게 하기위해 (다른 스크립트 파일과 객체명이 겹치는 불상사를 줄이기 위해) 사용하는 패턴이다.

음 다른 언어를 선행했던 개발자라면 접근 제한자에 대해 알고있을 거야. private / public 등등.

근데 자바스크립트에서는 접근 제한자는 존재하지 않지.

접근 제한을 구현하기 위해 사용하는게 모듈 패턴이기도 해.

모듈 패턴을 이해하기 위해서는 클로저와 컨텍스트 정도는 알고있어야 해.

클로저를 어느정도 이해했다면 모듈패턴을 구현한 예제 코드를 보면 이해하기가 쉬울거야.

#sample 1

var testModule = (function () {
  var counter = 0;

 return {
       incrementCounter : function() {
             return ++counter;
       },

       resetCounter : function() {
            console.log("counter value prior to reset: " + counter);
            counter = 0;
       }
 };
})();

testModule.incrementCounter(); // 1
testModule.incrementCounter(); // 2
testModule.incrementCounter(); // 3
testModule.incrementCounter(); // 4
testModule.incrementCounter(); // 5
testModule.incrementCounter(); // 6
testModule.resetCounter(); //"counter value prior to reset: 6"

가장 기본적인 모듈패턴. return 되는 영역은 public 영역으로 만들어서 접근할 수 있도록 하고 return 문맥 전의 공간은 클로저가 형성되어 private 영역이 된다. 좀더 발전시켜서 incrementCounter 와 resetCounter 메소드를 비공개 처리를 하고싶다면!?

#sample 2

var testModule = (function () {
  var counter = 0;
  var incrementCounter = function() {
             return ++counter;
       };
  var resetCounter = function() {
            console.log("counter value prior to reset: " + counter);
            counter = 0;
       };
 return {
       incrementCounter : incrementCounter,
       resetCounter : resetCounter
 };
})();

이렇게 클로저 공간에 메소드를 선언하고 return 부분에는 호출될 메소드를 지정해주면 완성.

이제 여기서 내 독자적인 스크립트의 네임스페이스패턴과 결합해 사용하고 싶다면?

#sample 3

var MYAPP = MYAPP || {};

MYAPP.testModule = (function () {
  var counter = 0;
      var incrementCounter = function() {
             return ++counter;
       };
      var resetCounter = function() {
            console.log("counter value prior to reset: " + counter);
            counter = 0;
       };
 return {
       incrementCounter : incrementCounter,
       resetCounter : resetCounter
 };
})();

네임스페이스를 MYAPP 으로 선언하고 결합해 사용한 모습. 

참고 사이트 : 

http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript