6. 조작 관련 기능 추가

성능개선

.append(), .prepend(), .before(), .after()와 같이 DOM에 요소를 삽입하기 위한 메서드들의 성능이 전반적으로 향상되었으며 특히, html() 메서드의 경우는 기존과 비교했을 때, 3배 이상 성능이 향상되었다. 다음은 jQuery 공식 사이트에서 제공하는 html() 메서드의 브라우저 별 성능개선 그림이다.

출처 : http://jquery14.com/day-01

뿐만 아니라, DOM 조작을 위해 자주 사용되는 .remove()와 .empty() 메서드의 경우는 4배 이상 속도가 빨라지도록 개선되었다.

새로운 메서드 : detach()

동적인 조작을 돕기 위해서 detach() 라는 새로운 메서드가 추가되었다. 이는 DOM에서 특정 요소를 제거하는 역할을 한다는 부분에서는 remove()와 기능적으로 동일하지만, 해당 요소의 데이터(이벤트 등)를 제거하지 않는다는 주요한 차이가 있다. 그렇기에, 이는 일시적으로 요소를 DOM에서 제거했다가 다시금 DOM에 추가해야 하는 경우 매우 유용하다. 이해가 잘 되지 않는다면 다음의 예제 코드를 살펴보도록 하자.

이 코드는 현재 본문에 Hello라는 텍스트를 갖는 <p> 요소가 존재한다고 가정하고 작성한 코드이다. 코드는 우선, 그 P 요소에 클릭 이벤트 처리기를 지정하고 있다. 그리고, 그 요소를 $p라는 변수를 통해서 참조하고 있는 것을 볼 수 있다. 그 다음, detach() 메서드를 사용하여 해당 요소를 DOM에서 제거한다. 이 순간, 실제로 DOM에서 P 요소는 제거된다(물론, 아직 $p 변수를 통해서 해당 개체는 참조되고 있다). 그 다음, 메모리 상의 참조인 $p를 이용하여 폰트 색상을 변경하고 있으며, appendTo() 메서드를 사용하여 다시금 DOM에 삽입하는 것을 볼 수 있다.

화면이 로드된 다음, p 요소를 클릭하면 배경색이 노랗게 바뀌는 것을 볼 수 있을 것이다. detach() 메서드를 사용해서 제거하였기에, 이벤트 정보가 유지되었기 때문이다. 반면, 상기 코드에서 detach() 메서드 대신 remove()를 사용한다면, 예제는 겉 보기에는 동일하게 동작하지만, 클릭을 해도 아무런 반응이 없을 것이다. remove()는 DOM에서 제거할 뿐만 아니라 요소와 관계된 모든 데이터를 제거하기 때문이다.

before, after, replaceWith 개체의 기능 개선

이제 여러분은 DOM에 아직 삽입되지 않은 노드(요소)에 대해서도 before, after, replaceWith 메서드를 사용할 수 있다. 이 이야기는 개체를 동적으로 생성한 뒤 DOM에 삽입하지 않아도 메모리 상에서 조작을 할 수 있다는 의미이다.

상기 코드는 span을 동적으로 생성한 뒤, 그 앞에 <p>taeyo</p>를 동적으로 만들어 붙이고, 그 전체를 box라는 id를 갖는 div에 추가하는 예제이다. 이 코드를 실행시킨 뒤, $("div#box")의 html을 확인해 보면 다음과 같은 결과가 나오게 된다.

clone(true) 메서드의 개선

기존 clone(true) 메서드는 깊은 복사를 수행하긴 했지만, 개체에 연결된 이벤트까지 복사하지는 않았다. 1.4 부터는 이 부분이 개선되어, clone(true)를 수행할 경우 이벤트 및 data까지도 모두 복사된다.

7. 이벤트 관련 기능들

이벤트 멀티 바인딩

1.4부터는 이벤트 관련 바인딩을 개체로 구성하여 bind() 메서드에 지정할 수가 있다. 예를 들면, 다음과 같이 코드를 작성하는 것이 가능하다.

상기 코드는 이벤트 바인딩을 익명 개체로 구성하여 바인딩하고 있지만, 해당 개체를 별도의 변수에 할당하여 전역적으로 선언한다면, 다른 곳에서 재 사용도 가능하다.

새로운 이벤트 : focusin, focusout

새롭게 지원되는 focusin, focusout 이벤트는 기능적으로는 focus, blur 이벤트와 완전히 동일하지만, 버블링을 지원한다는 것이 특징이다. 그렇기에, 여러분이 이벤트 위임 기능을 필요로 하는 경우에는 이러한 이벤트들이 큰 도움이 될 것이다. foucs나 blur 이벤트는 live()를 사용하는 경우 제대로 동작하지 않을 것이니 말이다.

이는 focus와 blur는 버블될 수 없다고 정의해놓은 DOM 이벤트 명세에 따른 것이기에, 이벤트 위임이 필요하다면 새롭게 지원되는 focusin, focusout 이벤트를 사용하는 것이 바람직하다.

모든 이벤트는 live()와 함께 사용할 수 있다

1.4 부터는 거의 모든 이벤트를 live()와 함께 사용할 수 있지만, ready, focus, blur 이벤트는 예외적으로 여전히 사용이 불가능하다. 다만, focus와 blur의 경우는 방금 위에서 설명한 것처럼 focusin, focusout를 대신하여 사용하면 되므로 사실상 지원되는 것이나 다를 바가 없다. 결국, ready 이벤트만이 live()를 지원하지 않는데, 이는 이벤트 위임이 지원되지 않아도 무관한 이벤트이기에 사실상 모든 이벤트를 다 지원한다고 이야기할 수 있는 것이다.

사실 기존에도 대부분의 이벤트가 live()를 지원하였지만, 1.4에 들어서 지원이 추가된 이벤트를 나열하자면 다음과 같다.

change, submit, focusin, focusout, mouseenter, mouseleave

다만, 여러분이 인터넷 익스플로러 8을 사용한다면, change 이벤트를 live()에서 사용하는 경우, 제대로 동작하지 않는 현상이 있을 수 있으므로 주의하기 바란다. 이 부분은 현재 버그 리포팅이 되어 있으며, 마이너 업데이트에서 보완될 것으로 보인다.

8. Queue 관련 기능

새로운 메서드 : .delay()

새로이 추가된 delay() 메서드는 큐 안에서 함수의 실행을 지연시키는 역할을 하는 메서드이다. 일반적으로 애니메이션 효과들 사이에서 시간 지연을 위해 사용하는 편이지만, 사용자 정의 큐가 존재한다면 그러한 큐의 지연을 위해서도 사용이 가능하다. 예를 들어, 다음의 코드를 살펴보자.

이는 foo라는 id를 갖는 요소에 대해서 1초 동안 SlideUp 애니메이션을 수행한 다음, 0.5초간 쉬었다가, 다시 FadeIn 애니메이션을 1초간 진행할 것이다. 이로써 훨씬 부드러운 애니메이션을 연출할 수 있을 것이다.

새로운 메서드 : .clearQueue()

clearQueue() 메서드는 현재 큐에 존재하는, 아직 실행되지 않은 모든 함수를 제거한다. 만일, 인자로 해당 큐의 이름을 지정하지 않는다면, 그는 기본적으로 표준 애니메이션 큐(fx)를 대상으로 남아있는 모든 함수를 제거하게 된다. 기능적으로 보았을 때, .stop(true) 메서드와 유사하게 보일 수 있지만, stop() 메서드는 오직 애니메이션에 대해서만 동작하는 반면, clearQueue() 메서드는 .queue() 메서드를 사용하여 구성된 일반적인 큐에 존재하는 모든 함수들도 제거할 수 있다.

9. Ajax 관련 기능

jQuery.param() 메서드의 개선

1.4 부터는 PHP나 Ruby on Rails 프레임워크를 지원하기 위해서, 중첩 매개변수 직렬화를 지원하고 있다. 즉, jQuery.param() 메서드의 기본 동작이 중첩 매개변수 직렬화를 수행하는 것으로 변경되었으며, 기존의 직렬화 방식을 사용하고 싶다면(권장하지는 않는다), jQuery.param() 메서드의 2 번째 인자로 true 값을 지정해야 한다.

이로 인해, { hobby : ["basketball", "coding"]} 개체가 기존에는 hobby=basketball&hobby=coding 와 같이 직렬화 되었다면, 1.4 부터는 hobby[]=basketball&hobby[]=coding 와 같이 직렬화된다는 것이다.

jQuery.param() 메서드의 기본 동작이 중첩 매개변수 직렬화로 변경되었기에, 기존의 얕은 수준(shallow 방식)의 매개변수 직렬화를 수행하고자 한다면, 앞서 말한 것과 같이 jQuery.param() 메서드의 2 번째 인자로 true 값을 지정해 주어야 한다. 또는, jQuery.ajax() 메서드의 인자 중 traditional을 true로 설정하여 ajax 요청 시에 기존 직렬화가 수행되도록 설정할 수도 있다. 만일, 그러한 설정을 매번하는 것이 아니라 한번 설정하여 전역적으로 적용되도록 하고 싶다면, jQuery.ajaxSettings.traditional를 true로 설정하여 전역적으로 기존 직렬화를 사용하도록 설정할 수 있다. 다음은 그러한 3가지 경우를 각각 코드로 보여주고 있다.

콘텐트 타입의 자동 탐지(json과 script에 대해서)

Ajax 요청에 대한 응답이 json MIME 형식(application/json)이라면, dataType은 기본적으로 "json"이 된다(만일, dataType이 지정되지 않았다면). 또한, Ajax 요청에 대한 응답이 JavaScript MIME 형식(text/javascript 또는 application/x-javascript)이라면, dataType은 기본적으로 "script"가 된다. 기존에는 명시적으로 지정해야만 올바로 동작했었다.

HTML 5 요소 지원

jQuery 1.4는 최근 이슈가 되고 있는 HTML 5에 대한 지원도 포함하고 있다. 즉, 다양한 HTML 입력 형식들 을 지원한다는 것이다. 예를 들면, 기존에는 존재하지 않았던 datetime이나 range와 같은 입력 컨트롤의 값도 .serialize() 메서드를 통해서 직렬화 된다는 것이다.

Ajax 요청에 대한 컨텍스트의 지원

1.4 부터는 Ajax 요청에 컨텍스트를 지정할 수 있게 되었다. Ajax 요청 시, context 속성을 지정하면, 모든 콜백 메서드에서 해당 컨텍스트를 기반으로 이후의 작업을 수행할 수 있다는 것이다. 기존에는 이를 위해서 클로저 등의 기법을 사용해야 했지만, context를 사용한다면 훨씬 코드를 간결하게 구성할 수 있다. 다음은 Ajax 요청에 context를 지정하는 예이다.

위와 같이 코드를 구성하면, success 콜백 안에서 this는 document.body를 참조하게 될 것이다.

jQuery.ajax()의 success 콜백함수 개선

jQuery.ajax() 메서드를 사용하는 경우, success 콜백 함수의 3번째 인자로 XHR(XMLHttpRequest) 개체를 가질 수 있게 되었다. 기존에는 jQuery.ajax()의 반환 값으로서만 얻을 수 있었던 XHR 개체를 success 콜백에서는 편하게 참조할 수 있게 된 것이다. 다음은 변경된 success 콜백 함수의 시그너처이다.

10. 유틸리티 메서드 관련

새로운 메서드 : jQuery.isEmptyObject()

새로이 추가된 이 메서드는 지정된 개체가 빈 개체인지를 파악하기 위한 유틸리티 메서드이다. 이는 지정된 개체가 어떠한 속성(상속된 속성 포함)도 가지고 있지 않다면 true를 반환한다. 다음은 사용 예이다.

새로운 메서드 : jQuery.isPlainObject()

지정된 개체가 개체 리터럴(즉, {}를 사용하여 만들어진 개체)이라면 true, 다른 개체 종류이거나 기본 형식의 개체라면 false를 반환하는 메서드이다. 다음은 사용 예이다.

새로운 메서드 : jQuery.contains()

어떤 DOM 요소 안에 특정 DOM 요소가 포함되어 있는지를 확인하기 위한 메서드이다. 2개의 인자를 가질 수 있는데, 첫 번째 인자로 지정된 DOM 요소 안에 두 번째 인자로 지정된 DOM 요소가 포함되어 있으면 true, 그렇지 않으면 false를 반환한다. 즉, 첫 번째 인자가 컨테이너로 사용된다고 생각하면 이해하기가 쉬울 것이다. 각각의 인자로는 반드시 DOM 요소를 지정해야 한다. 다음은 문서 안에 <p> 요소가 존재한다고 가정했을 경우에, 이 메서드를 사용하는 예이다.

보이다시피, 첫 번째 인자로 p 요소(DOM 요소를 접근하기 위해서 $("p")[0] 혹은 $("p").get(0)을 사용한다)를 사용하고 두 번째 인자로 body를 사용하면, p 요소는 body 요소를 가지고 있지 않으므로 false가 되고, 반대의 경우는 true가 되는 것을 볼 수 있다.

새로운 메서드 : jQuery.noop()

1.4에 추가된 noop() 유틸리티 메서드는 아무 것도 하지 않는 빈 함수가 필요한 경우, 사용할 수 있는 비어있는 함수이다. 실제로 jQuery 1.4.2의 소스를 살펴보면, noop 함수는 function() { }라고 정의되어 있다. 사실, 이 함수가 정말로 필요한 것인지에 대해서는 의견이 분분하다.

기타 알아두면 좋을 만한 변경사항들

arguments.callee 배제

arguments.callee는 ECMAScript 5 명세에서 제외될 것으로 예정되어 있기에, jQuery 내부에서 이를 참조하고 있는 코드는 모두 제거되었다.