Experiment

앵버박사 2014. 3. 19. 16:37

안녕하세요? 앵버박사입니다.

오늘은 제가 자바스크립트로 라이팅한 디자인패턴에 대해 소개하려고 합니다.

저는 디자인패턴을 잘아는 사람도 아니고, 관련 도서도 두권밖에 읽지 않았습니다.

제가 보여드리는 것이 실제 디자인패턴이라고 부를 수 있는지, 아니면 이미 존재하는지 조차 알지 못하지만

나름 생각을 해서 내린 결론이기에 기록으로 남깁니다.

만약 잘못된 점이 있다면 댓글로 알려주시면 많은 도움이 될 것 같습니다. :)


이 디자인패턴을 라이팅하게 된 계기는 바로 '중첩루프' 때문입니다.

코딩 도중 3중첩 for문을 써야할 일이 생겼는데, 너무 보기가 싫은 나머지 이를 제거하고 관리하기 수월한 방법이 없을까 머리를 굴리게 되었죠~ 예를 들면..


<!-- HTML -->

<div class="portland:portlet">

  <div id="portlet01" class="( 3, 7 )">1</div> <!-- 가장 하위의 우리가 원하는 목표물 -->

  <div id="portlet02" class="( 8, 4 )">2</div>

</div>

<div class="portland:portlet">

  <div id="portlet03" class="( 3, 4 )">3</div>

  <div id="portlet04" class="( 1, 2 )">4</div>

</div>

<!-- parallax와 grid도 존재 -->


// JavaScript

var componentNames = [ "portlet", "parallax", "grid" ];


for ( var i = 0; i < componentNames.length; i++ ) {

  var componentName = componentNames[ i ];

  var componentGroupList = document.getElementsByClassName( "portland:" + componentName );


  for ( var j = 0; j < componentGroupList.length; j++ ) {

    var componentGroup = componentGroupList[ j ].children;


    for ( var k = 0; k < componentGroup.length; k++ ) {

      var component = componentGroup[ k ]; // 드디어 접근! 우리가 원하는 목표물!

    }

  }

}


이처럼 우리가 원하는 목표인 가장 하위노드( portlet01, portlet02, portlet03, portlet04 )를 얻어오려면 for루프를 3번이나 중첩해서 돌려야 합니다. 로직은 가장 마지막 루프에만 들어가는데 메인코드가 이렇다보니 화가났습니다. 

이제 제가 작성한 디자인패턴을 적용한 모습을 한번 보시죠~


// HTML 코드 생략

var componentNames = [ "portlet", "parallax", "grid" ];


var foreach = function( $roof, $nextFunction, $lastFunction ) {

  for ( var i = 0; i < $roof.length; i++ )

    $nextFunction( i, $roof, $lastFunction );

};


var componentGroupIterator = function( $index, $parent, $lastFunction ) {

  var componentName = $parent[ $index ];

  var roof = document.getElementsByClassName( "portland:" + componentName );

  foreach( roof, componentsIterator, $lastFunction );

};


var componentsIterator = function( $index, $parent, $lastFunction ) {

  var roof = $parent[ $index ].children;

  foreach( roof, $lastFunction );

};


// 메인루프

foreach( _componentNames, componentGroupIterator, function( $index, $parent ) {

  var component = $parent[ $index ]; // 최종 목표물 획득!

} );


foreach함수를 이용하여 각 Iterator객체를 조합하여 원하는 루프를 만들어 낼 수 있게 되었습니다.

루프 사이에 새로운 루프가 들어갈 수 도있고, 뺄 수 도있고, 루프 순서를 바꿀 수도 있습니다.

자바스크립트에선 함수지만 자바로 따지자면 xxxInterator는 객체가 되겠습니다.


이제야 메인루프가 간결하고 깔끔해보여 마음에 드네요~ 

( 그나저나 이름은 뭘로 해야하나.. )