Javascript 퍼사드(façade) 패턴 / 자주 같이 사용되는 메서드를 묶자

Javascript 퍼사드(façade) 패턴 / 자주 같이 사용되는 메서드를 묶자

 

퍼사드 패턴(façade pattern) 은

주로 같이 자주 사용되는 메서드의 호출들을 묶어 새로운 메소드를 만들어 주는 패턴입니다.

 

개발을 하다보면 많은 기능을 가지고 있는 메소드를 개별 기능으로 나누어 작성을 하곤 합니다.

기능의 세분화는 좋은 방법이지만 메소드의 수를 증가시키고

메서드간 매개변수가 증가하게 될 수도 있습니다.

 

퍼사드 패턴을 사용하게 되면 여러 인터페이스를 활용하는 로직을 하나의 통합된 인터페이스를 제공하므로서

쉽게 여러 인터페이스를 활용할 수 있습니다.

 

예를들어, 지도라는 객체에 마커, 폴리라인, 폴리곤 객체를 추가하는 setMap 메서드가 있습니다.

 

setMap(){
    /*지도 객체 초기화 로직*/
    /*마커 객체 생성 로직*/
    /*지도에 마커 객체 초기화 로직*/
    /*지도에 마커 객체 추가 로직*/
    /*폴리라인 객체 생성 로직*/
    /*지도에 폴리라인 객체 초기화 로직*/
    /*지도에 폴리라인 객체 추가 로직*/
    /*폴리곤 객체 생성 로직*/
    /*지도에 폴리곤 객체 초기화 로직*/
    /*지도에 폴리곤 객체 추가 로직*/
}

 

setMap 메서드에서는 위의 순서대로 로직이 구현되어 있습니다. 

setMap 메서드 내 기능들을 분리해 새로운 메서드들을 작성합니다.

 

setMap(){
    /*지도 객체 초기화 로직*/
    createMarker();
    clearMarker();
    addMarker();
    createPolyline();
    clearPolyline();
    addPolyline();
    createPolygon();
    clearPolygon();
    addPolygon();
}
createMarker(){
}
clearMarker(){
}
addMarker(){
}
createPolyline(){
}
clearPolyline(){
}
addPolyline(){
}
createPolygon(){
}
clearPolygon(){
}
addPolygon(){
}

 

여기에 퍼사드 패턴을 적용하여 마커와 폴리라인, 폴리곤 객체를 각각 지도에 추가하는 메서드를 생성합니다.

 

setMap(){
    /*지도 객체 초기화 로직*/
    setMarker();
    setPolyline();
    setPolygon();
}
setMarker(){
    createMarker();
    clearMarker();
    addMarker();
}
setPolyline(){
    createPolyline();
    clearPolyline();
    addPolyline();
}
setPolygon(){
    createPolygon();
    clearPolygon();
    addPolygon();
}
createMarker(){
}
clearMarker(){
}
addMarker(){
}
createPolyline(){
}
clearPolyline(){
}
addPolyline(){
}
createPolygon(){
}
clearPolygon(){
}
addPolygon(){
}

 

객체를 생성하고, 기존객체를 초기화 하고 새로운 객체를 지도에 추가하는 set...()메소를 만들어 

create..., clear..., add... 메소드들을 묶어주었습니다.

9개의 메서드를 호출해야했던 setMap 메서드는 3개의 set메서드만 호출하면 같은 기능이 동작하게 되었습니다.

그리고 각각의 객체만 갱신하고 싶은경우에도 set...메서드만 호출하면 됩니다.

 

이처럼 퍼사드 패턴을 적용하면 통합된 메서드를 제공하므로서 여러 기능을 간단하게 동작 시킬 수 있습니다.