Design Pattern - Module Design

https://scotch.io/bar-talk/4-javascript-design-patterns-you-should-know#undefined

4 JavaScript Design Patterns You Should Know

 

JS 모듈은 흔히 쓰이는 디자인 패턴이다. 보통 독립적인 코드를 작성하기 위해 사용된다. 

OOP( Object-Oriented Programming )에 잘 어울리며 코드는 캡슐화 되어 JS class 단위로 운영된다. 여기에 특징 중 하나는 public과 private 구역을 나누어 사용할 수 있다.

모듈은 private 범위에 접근하기 위해 IIFE( Immediately-Invoked-Function-Expressions )으로 만들어진다. 

var HTMLChanger = (function() {
  var contents = 'contents'

  var changeHTML = function() {
    var element = document.getElementById('attribute-to-change');
    element.innerHTML = contents;
  }

  return {
    callChangeHTML: function() {
      changeHTML();
      console.log(contents);
    }
  };

})();

HTMLChanger.callChangeHTML();       // Outputs: 'contents'
console.log(HTMLChanger.contents);  // undefined

위에 코드 처럼 생겼다.

위에서 callChangeHTML 함수는 return 객체와 묶여있어 변수 contents를 불러낼 수 있지만 직접 contents 변수를 불러낼 수는 없다. 그래서 보통 return 에 묶어 노출 할( public 할 ) 변수를 결정한다.