chain, traversing

chain?

 jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있습니다. 이를 이용하면 한번 선택한 대상에 새 대해 단기적인 제어 뿐만아니라 마치 체인으로 연결된 것 처럼 연속적인 제어를 할 수 있습니다.

Chain 의 장단점 

- 장점

1. 코드의 간결성(연속적인 제어를 할 수 있기 때문에 코드가 간결해 진다)
2. 인간의 언어방식과 유사해 자연스러운 사고과정으로 이해하기가 편함 

-단점

1. 너무 복잡한 chain일 경우 코드의 가독성을 떨어 뜨릴 수 있음 
2. 개발의 편의가 있을 수 있지만 유지/보수 단게에서 비 효율적인 방식 

 

chain 활용 

예를 들어 div 테그에 css스타일로 가로 300px 세로 300px 그리고 배경색을 빨강으로 지정하려고 한다면 일반적으로 jQuery로 엘리먼트를 매칭하여 위에 속성을 넣으려면

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <div class ="div_chain" style="border: solid 1px black">  

    </div>

    <script type="text/javascript">
        $(".div_chain").text('빨강상자입니다');
    	$(".div_chain").css('width', '300px');
    	$(".div_chain").css('height', '300px');
    	$(".div_chain").css('background-color', 'red');
    </script>

 

위와 같이 작성을 해야 했을 것입니다. 그렇지만 chain 성질을 활용한다면 일일이 값을 넣을 필요 없이 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <div class ="div_chain" style="border: solid 1px black">  

    </div>

    <script type="text/javascript">
      $(".div_chain").text('빨강상자입니다').css('background-color', 'red').css('width', '300px').css('height', '300px');
    </script>

위와 같이 이어서 작성할 수 있습니다. 코드의 가독성을 높여 주고 싶으면 줄바꿈과 들여쓰기를 해도 상관없습니다.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <div class ="div_chain" style="border: solid 1px black">  

    </div>

    <script type="text/javascript">
      $(".div_chain")
      .text('빨강상자입니다')
      .css('background-color', 'red')
      .css('width', '300px')
      .css('height', '300px');
    </script>

 

chain traversing(탐색)

 chain traversing은 chain의 대상을 바꾸어 계속 연장시킬수 있는 방법입니다. chain의 장점을 살려 연결적으로 편의성을 제공하기는 하지만 위에서 설명한 chain의 단점과 같이 코드의 가독성을 떨어뜨리는 방법이라 추천하는 방법은 아닙니다.

위와 같이 웹페이지를 구성한후 위에 내용에만 text와 background를 주려면

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 <ul class="first">
  <li class ="list_1">&nbsp;리스트 1번
    <p></p>
  </li>
  <li class ="list_2">&nbsp;리스트 2번</li>
  <li class ="list_3">&nbsp;리스트 3번</li>
  <li class ="list_4">&nbsp;리스트 4번</li>
</ul>
<ul class="secone" >
  <li class ="list_1">&nbsp;리스트 1번
    <p></p>
  </li>
  <li class ="list_2">&nbsp;리스트 2번</li>
  <li class ="list_3">&nbsp;리스트 3번</li>
  <li class ="list_4">&nbsp;리스트 4번</li>
</ul>

<script type="text/javascript">
  $("ul.first")
  .css('list-style', 'none');
  $("ul.first>.list_1>p")
  .css('background-color', 'olive')
  .text('리스트 1 의 내용입니다');
</script>

위와 같이 ul중 class의 값이 first인 값을 찾아 들어가 list_1이라는 클래스 안에 p테그를 찾아 값을 매핑해 줄 수 있지만  위에 코드는 traversing 을 사용하여 아래와 같이 바꿀 수 있습니다. 

<script type="text/javascript">
  $("ul.first")
  .css('list-style', 'none');
  $(".first").find(".list_1").find('p')
  .css('background-color', 'olive')
  .text('리스트 1의 내용입니다');
</script>

script 테그 안의 내용을 이렇게 바꿔도 결과에는 아무 영향을 주지 않습니다 그렇다면 굳이 왜 find 라는 메소드를 사용하는 걸까? 이유는 바로 find를 사용하면 경로와 chain의 대상을 바꾸어 연장 시킬 수 있기 떄문입니다. traversing은 두개의 메소드가 있습니다. 

1.  .find() : 괄호 안 선택자에 맞는 엘리먼트를 탐색한다 
2.  .end() : 그 전에 wrapper로 전달했을 커넥트로 돌아간다.

 정리하자면 end()는 탐색 전 엘리먼트로 돌아가는 것입니다 위와 같은 경우 list_1에 내용엔 저런 값을 주고 list_2에는 다른 값을 주고 싶을떄 chain을 두개를 사용 하는 것이 아니라 traversing을 이용해 chain을 연장해서 매핑이 가능하게 되어집니다.

<script type="text/javascript">
  $("ul.first")
  .css('list-style', 'none');
  $(".first")
  .find(".list_1")
  .find('p')
  .css('background-color', 'olive')
  .text('리스트 1의 내용입니다')
  .end()
  .end()
  .find('.list_2')  
  .find('p')
  .css('background-color', 'yellow')
  .text('리스트 2의 내용입니다');
</script>

script코드를 위와 같이 작성하면 chain을 끊어지지 않게 유지 하면서 list_1 안에 p테그와 list_2안에 p를 모두 수정할 수 있습니다.