원본입니다.
모듈 디자인 패턴
디자인 패턴은 자사스크립트 패턴중 가장많이 사용되는 패턴으로,
특정 코드들을 독립적으로 유지하기위해 사용됩니다.
이 패턴은 잘 구조화된 코드를 지원하기 위해 느슨한 결합성을 제공합니다.
객체지향 프로그래밍에 익숙한 분들에게, 모듈은 자바스크립트의 클래스와 비슷합니다.
클래서의 많은 장점줌 하나는 바로 캡슐화로, 다른 클래스의 접근으로부터 클래스를 보호할 수 있습니다.
모듈 패턴은 public과 private 형태로 내부 속성들을 관리할 수있는데,
모듈은 즉시실행함수표현(IIFE)를 통해 private 변수를 구현할 수있습니다.
그것은 아래와 같습니다.
(function() {
//private 함수또는 변수들을 선언하세요.
return {
//public 함수 똔느 변수를 선언하세요.
}
}();
위의 코드에서 우리는 우리의 리턴하고 싶은 객체를 리턴하기 전에, 그 객체의 밖에 private 변수나 함수를 생성합니다.
클로져 밖에 있는 코드는 같은 영역안에 있지 않기 때문에 private 변수들에 접근할 수 없게 됩니다.
실제로 어떻게 사용하는지 한번 보죠.
var HTMLChanger = (function(){
var contents = 'private 변수';
var changeHTML = function(){
var element = document.getElementById('attribute-to change');
element.innerHTML = contents;
}
return {
callChangeHTML : function(){
changeHTML();
console.log(contents);
}
}
};
})();
HTMLChanger.callChangeHTML(); //출력 : private 변수
console.log(HTMLChanger.contents) // undefined
callChangerHTML 이 반환된 객체이 있고 HTMLChanger 네임스페이스에서 참조 될 수 있지만
하지만, 모듈밖에서는 내부에 있는 contests 변수에는 접근 할 수 없습니다.
노출식 디자인패턴
모듈 패턴의 변화는 노출이라고 불립니다. 모듈 패턴 표출의 목적은 캡슐화를 유지하고
객체에서 한 변수들과 메서드들은 나타내는 것입니다.
실제 활용은 이렇습니다.
var Exposer = (function(){
var privateVariable = 10;
var privateMethod = function(){
console.log('내부에서만 사용하고 싶은 메서드');
privateVariable++;
}
var methodToExpose = function(){
console.log('밖에서 쓰고 싶은 메서드');
}
var otherMethodIWantToExpose = function(){
privateMethod();
}
return {
first: methodToExpose,
second: otherMethodIWantToExpose
}
}();
Exposer.first(); //출력 : ‘this is a method I want to expose’
Exposer.second(); //출력 : inside a private method!'출력
Exposer.methodToExpose; //underfined;
위의 코드가깔끔해 보이긴 하지만, 단점은 private 메서드들에 접근 할 수 없다는 것입니다.
그렇게 때문에 모듈패턴의 노출방식은 유닛테스트가 어렵습니다.
또한 리턴되는 속성들이 내부적으로 이미 정의되어있기 때문에 내부 함수의 overiding을 할 수 없습니다.
번역하면서 궁금한점
“이 패턴은 잘 구조화된 코드를 지원하기 위해 느슨한 결합성을 제공합니다.”
이부분이 잘 해석이 되질 않습니다.
모듈 패턴이 느슨한 결합성을 제공한다는 의미가 어떤 뜻인가요?
