[js] 디자인패턴 - 1

c, c++기반으로 개발을 해오다 보니 자바스크립트로 코딩하고 보면 이게 c소스인지 자바스크립트 소스인지 구분이 잘 가지 않더라.

기능적으로 정상 작동하니 그냥 넘어 갈 수 있겠으나, 이왕 자바스크립트를 만지게 된 김에 자바스크립트처럼 보이는 코딩을 하고싶어 졌다.

앞으로 내가 글을 쓰는 내용은 아래 블로그 내용을 내가 공부한 시점으로 재 해석하여 정리 요약하는 정도의 글이 될터이니

참고만 하고 아래의 블로그에서 보다 깊은 깨닮음을 얻길 바란다.

http://www.bsidesoft.com/?p=877

[js의 전략패턴 - 제어문을 객체구조화]

function attack(weapon, opt){

    switch(weapon){

        case 'sword':

        if(opt){

            

        }else{

        }

        break;

        case 'bow':

        if(opt){

        }else{

        }

    }

}

위의 attack함수는 무기 타입과 옵션에 따라 공격이 다양해진다. 

이 함수의 문제는  확장이 어렵고, 수정이 어렵다.

따라서, 위의 함수를 아래와 같이 리펙토링 한다.

function attack(weapon, opt){

    switch(weapon){

        case 'sword':sword(opt); break;

        case 'bow':bow(opt); break;

    }

}

function sword(opt){

    if(opt){

 

    }else{

    }

}

function bow(opt){

    if(opt){

    }else{

    }

}

이렇게 무기별로 분리 하고보니 attack 함수는 인자값 opt를 더이상 처리하지 않게 되었다.

javascript는 함수가 일급 객체로 취급한다. 먼 말이냐 하면 함수도 변수처럼 쓸 수 있다는 것이다. 

그럼 이 말은 또 무엇이냐?  바로 함수 자체를 변수와 같이 인자값으로 사용 가능하다는 것이다.

따라서, 위의 attack함수를 아래와 같이 리펙토링 가능해진다.

function attack(weapon, opt){

    weapon(opt);

}

switch(wType){

    case 'sword': attack(sword, opt); break;

    case 'bow': attack(bow, opt); break;

}

attack 안에서의 조건문(switch)을 호출시에 사용하여 attack 함수가 상당히 간단해 졌다.

javascript에서 라우팅이라는 개념이 있다. 이를 적용시키면

var weapons = {

    'sword': sword,

    'bow': bow

};

weapons['sword'](opt);

attack이라는 함수가 사라지고 weapons이라는 라우팅 변수를 사용하여 조건문(switch)이 사라지게 되었다.

지금까지 일어난 코드 변화는

1. 개별로직을 함수로 분리 (sword, bow)

2. 조건문이 함수 내부에 있을 시, 외부로 옮김

3. 함수 외부의 조건문은 취약 하므로 설정 기반의 라우터테이블로 변경하여 안정성을 높임.

이러한 변화를 통하여, 손쉽고 안전하게 무기와 옵션에 따른 기능을 추가 할 수 있게 되었다.