#TIL26 (2)

chain

• jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있음
• 이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있다.

chain의 장점

• 코드가 간결해진다.
• 인간의 언어와 유사해서 사고의 자연스러운 과정과 일치

  <a class="site" href="http://www.naver.com" 
  target="_self" title="네이버">네이버</a>

jQuery를 이용해서 코딩하는 경우

$('a.site').html('다음').attr('href','http://www.daum.net')
.attr('target','_blank').attr('title','다음').css('color','orange');

javascript의 DOM을 이용해서 코딩하는 경우

const siteEl = document.querySelector('a.site');
siteEl.textContent = '다음';
siteEl.setAttribute('href','http://www.daum.net');
siteEl.setAttribute('target','_blank');
siteEl.setAttribute('title','다음');
siteEl.style.color = 'orange';


전

후

 

탐색(traversing)

• chain의 대상을 바꿔서 체인을 계속 연장시킬 수 있는 방법
• 즉, traversing을 이용해서 chain 안에서 대상을 움직일 수 있다.
• 너무 복잡한 chain은 코드의 가독성을 떨어 뜨릴 수 있음

<예시>

  <ul class="menu">
    <li class="item1">item1</li>
    <li class="item2">item2</li>
    <li class="item3">item3</li>
    <li class="item4">item4</li>
  </ul>

$('ul.menu').find('.item1').css('background-color','red').end().find('.item4').css('background-color','blue');