본문 바로가기

Programming/jQuery

jQuery : chain에 대한 개념.

어떤 프로그래밍 언어이든 method는 status에 대해서 CRUD(insert, select, update, delete 등)의 영향을 줍니다.
(여기서, method는 function 으로 함께 이해하는게 좋을까란 생각도 드네요)
(제가 접한 프로그래밍 언어는 많지 않지만 그렇다고 생각하겠습니다.)

jQuery cookbook 에서 1장에 체인에 대한 개념이 간략히 나오는데요,
이에 대한 설명을 아래와 같이 하고 있습니다.

체인은 jQuery 함수를 사용하여 현재 선택된 요소(즉, jQuery 함수로 현재 감싸져 있는 요소)에
jQuery 메서드를 끝없이 연결하여 적용할 수 있게 하는 기법이다. 내부적으로 각 메서드들은 항상
jQuery 메서드가 적용되기 전에 선택된 요소를 반환하는데, 그렇기에 체인을 계속 이어갈 수 있는 것이다.

개념은 위와 같습니다. 아래는 그러한 개념이 적용되어있는 코드입니다. (서적의 예제를 그대로 인용하였습니다.) 

jQuery('div').hide();                                        // 페이지의 모든 div를 숨김
jQuery('div').text('new contents');                    // 모든 div의 내부 텍스트를 변경
jQuery('div').addClass("updatedContent");        // div에 updatedContent 클래스를 추가
jQuery('div').show();                                      // 페이지에 모든 div를 나타냄.
체인개념으로 인해 아래와 같이 변경됩니다.
jQuery('div').hide()
                  .text('new contents')
                  .addClass("updatedContents")
                  .show();

이걸 포스팅까지 하는 이유는 클라이언트에서 매번 요소를 검색하는 일을 방지해주는 개념이기 때문입니다.
매번 DOM 객체를 얻어서 검색한다면 얼마나 골치아플까요.
이는 클라이언트의 부하를 줄일 뿐만 아니라 코드의 생산성에도 도움이 되어보이네요.