[JavaScript] #4, Module Pattern 모듈 패턴

Javascript Module Pattern 

모듈 패턴 모듈화 / 네임스페이스

JavaScript 모듈화가 필요한 이유는 객체명이 겹치는 상황을 방지

전역 공간을 어지럽히지 않기 위함

정보 은닉(information hiding)을 하기 위해

Javasciprt는 별도의 public / private 를 제공하지 않기 때문에, 클로져를 사용하여 구현 할수 있음.

Javascript는 function 레벨로 Scope가 제공되어 변수는 외부에 참조 될수 없음.

Javascript 모듈화를 위해 기본적으로 클로저를 사용

클로저 개념을 알아야 좀더 이해하기 쉬움

쉽게 클로저는 private를 구현하기 위한 방법이라고 생각

아무튼 모듈화를 하기 위해 몇가지만 기억하고 하면 된다.

• 익명 함수 사용
• 변수 접근 제한
• 함수 접근 제한
• 네임스페이스 이용

순서대로 하나씩 보고 최종적으로 이용할 샘플 완성으로 마무리

익명 함수 사용

var sampleModule = (function() {
    console.log("sample Module")
})();

변수 접근 제한

익명 함수 안에 변수 하나를 추가 함. privateVar

외부로 setVar / getVar 두개 함수 만들어서 return에 넣어줌.

외부함수로 감싸진 내부함수 setVar/getVar 함수들은 외부함수에 있는 변수(privateVar)를 건들수 있음.

이떄 사용할때는 privateVar 함수를 직접 제어할 수 없게 됨.

var sampleModule = (function () {
  console.log("sample Module")
  var privateVar = 0;

  return {
    setVar: function (value) {
      console.log("setVar " + privateVar + " => " + value);
      privateVar = value;
    },
    getVar: function () {
      console.log("getVar return " + privateVar);
      return privateVar;
    }
  }
})();



sampleModule.setVar(5);
sampleModule.getVar();

console.log("sampleModule => ", sampleModule);
console.log("sampleModule.privateVar => ", sampleModule.privateVar);

사용할 때 sampleModule 내부에 있는 privateVar 변수는 보이지 않는다.

setVar/getVar 함수를 통해 제어 할수 있게 되어 있음.

sampleModule을 그대로 찍어보면 setVar, getVar 함수를 볼수 있음.

다음은 내부에 쓰이는 함수들도 모듈화하여 은닉하는 방법

함수 접근 제한

return안에 들어 있던, 함수들을 sampleModule 안에 함수 표현식으로 선언하였음.

아래와 같은 방식으로 구현하면 사용하는 입장에서는 setVar /getVar를 이용할 뿐

내부적으로 어떤 함수가 호출 되는지 알수 없음

var sampleModule = (function () {
  console.log("sample Module")
  var privateVar = 0;

  var setPrivateFunc = function (value) {
    console.log("changeVar " + privateVar + " => " + value);
    privateVar = value;
  };

  var getPrivateFunc = function () {
    console.log("getVar return " + privateVar);
    return privateVar;
  };

  return {
    setVar: setPrivateFunc,
    getVar: getPrivateFunc
  }
})();

sampleModule.setVar(5);
sampleModule.getVar();

console.log("sampleModule => ", sampleModule);
console.log("sampleModule.privateVar => ", sampleModule.privateVar);

궁금해서 찍어 봄.

console.log(sampleModule.setVar);

함수가 다보이는게 별로임.

한번 더 감싸 봄.

var sampleModule = (function () {
  console.log("sample Module")
  var privateVar = 0;

  function changeVar(value) {
    console.log("changeVar " + privateVar + " => " + value);
    privateVar = value;
  }

  var setPrivateFunc = function (value) {
    changeVar(value);
  };

  var getPrivateFunc = function () {
    console.log("getVar return " + privateVar);
    return privateVar;
  };

  return {
    setVar: setPrivateFunc,
    getVar: getPrivateFunc
  }
})();

sampleModule.setVar(5);
sampleModule.getVar();

console.log("sampleModule => ", sampleModule);
console.log("sampleModule.privateVar => ", sampleModule.privateVar);
console.log(sampleModule.setVar);

함수 내부가 안보이기는 하지만, 코드가 불필요하게 늘어가기도 하고 다른 좋은 방법이 있을거 같음.

네임스페이스

마지막으로 네임 스페이스 패턴를 적용

네임 스페이스 패턴을 적용하는 이유는 다른 전역 변수와 겹치지 않기 위함.

자세한 내용은 따로 봐야 함.

var sampleAPP = sampleAPP || {};

sampleAPP.sampleModule = (function () {
  console.log("sample Module")
  var privateVar = 0;

  function changeVar(value) {
    console.log("changeVar " + privateVar + " => " + value);
    privateVar = value;
  }

  var setPrivateFunc = function (value) {
    changeVar(value);
  };

  var getPrivateFunc = function () {
    console.log("getVar return " + privateVar);
    return privateVar;
  };

  return {
    setVar: setPrivateFunc,
    getVar: getPrivateFunc
  }
})();

sampleAPP.sampleModule.setVar(5);
sampleAPP.sampleModule.getVar();

console.log("sampleAPP.sampleModule => ", sampleAPP.sampleModule);
console.log("sampleAPP.sampleModule.privateVar => ", sampleAPP.sampleModule.privateVar);
console.log("sampleAPP.sampleModule.setVar => ", sampleAPP.sampleModule.setVar);