-
[디자인 패턴] 적응자 패턴, 빌더 패턴, 복합체 패턴Web/JavaScript 2020. 2. 5. 16:44
적응자 패턴
인자에 따라 구조가 변하는 패턴으로, 서로 다른 객체에 동일한 메서드를 만들고, 해당 객체를 생성자 객체의 인자로 넘겨 활용하는 패턴
다들 친구와 자신의 여자친구에게 인사하는 방식이 다를 것이다. 이를 코드로 구현해보자.
var greetSystem = (function(){ var greetSystem = function(adapter){ this.adapter = adapter; } greetSystem.prototype.greeting = function(){ this.adapter.greeting(); } return greetSystem; })();
var friend = { greeting : function(){ console.log("ㅎㅇ"); } } var girlfriend ={ greeting : function(){ console.log("♡"); } }
var greet = new greetSystem(friend); greet.greeting(); // ㅎㅇ var greet = new greetSystem(girlfriend); greet.greeting(); // ♡
이처럼 생성자 객체의 인자에 따라 서로 다른 결과를 출력하는 것을 확인할 수 있다.
적응자 패턴은 게임에서 몬스터에 따라 서로 다른 공격방식을 가지는 알고리즘에서 활용할 수 있을 것이다.
빌더 패턴
옵션이 다양할 때, 사용하는 패턴으로 옵션을 설정하는 메서드가 존재하고, 이 메서드의 반환 값을 this로 설정함으로써 연속해서 사용할 수 있도록 한다.
var phone = function(name){ var size = null; var weight = null; var apps = []; return { download : function(list){ list.forEach(app => apps.push(app)); return this; }, setWeight : function(number){ weight = name + '의 weight : ' + number + 'g'; return this; }, setSize : function(m,n){ size = name + '의 size : ' + m + ' X ' + n; return this; }, build : function(){ return { name : name, size : size, weight : weight, apps : apps } } } } var galaxy = phone('galaxy').setSize(13,7).setWeight(98).download(['카카오톡','네이버','구글']).build();
디자인 패턴을 공부하다 보면 헷갈릴수도 있는데, 빌더 패턴은 다른 패턴과 다르게 IIFE를 사용한 생성자 함수에 관한 패턴이 아닌, 클로저를 활용해 객체를 설정하는 패턴이다.
build : function(){ return new Phone(name,size,weight,apps); }
build 부분을 위의 코드처럼 바꿔 Phone이라는 생성자 객체를 만들고, prototype을 이용해 메서드를 추가할 수도 있다.
복합체 패턴
복합체 패턴은 트리 구조에 사용하는 패턴으로, jQuery가 가장 유명한 예시일 것이다. jQuery에선 하나의 태그를 선택하든, 여러 개의 태그를 동시에 선택하든 모두 같은 메서드를 활용할 수 있다. 이러한 패턴을 복합체 패턴이라 한다.
'Web > JavaScript' 카테고리의 다른 글
[디자인 패턴] 플라이급 패턴, 퍼사드 패턴, 프록시 패턴 (0) 2020.02.04 클로저 (0) 2020.02.02 [디자인 패턴]즉시 함수 호출 표현식(IIFE)을 사용한 싱글턴 패턴 (0) 2020.02.01 ES6 꿀팁 (0) 2020.01.15 값에 의한 vs 참조에 의한 (0) 2020.01.06