최신 버전의 jQuery 1.5_jquery 개선 사항 분석

버전 1.5의 가장 큰 업데이트는 AJAX를 완전히 다시 작성하여 더 큰 확장성을 제공한다는 것입니다. 그러나 에너지 및 공간 제약으로 인해 새로운 AJAX에 대한 분석은 다음으로 미루겠습니다. 이 기사에서는 자세한 개선 사항을 간략하게 소개하겠습니다.

jQuery._Deferred 및 jQuery.Deferred
먼저 이 두 가지 새로운 것에 대해 이야기해야 합니다. 왜냐하면 이 두 가지가 인프라로 존재하기 때문입니다. 이 두 가지를 명확하게 설명하지 않으면 설명할 수 없는 문제가 있습니다. 전혀.

우선 jQuery.Deferred는 jQuery._Deferred의 향상된 버전이므로 이 문제는 jQuery._Deferred로 시작하면 대부분의 문제를 설명할 수 있습니다.

연기란 무엇인가요? 말 그대로 나의 첫 번째 반응은 "lazy loading"이었습니다. 대문자의 첫 글자는 "type"의 정의여야 하므로 이것은 아마도 "lazy loading 기능을 투명하게 제공하는" 유형일 것입니다. 그러나 실제로는 "지연"이라는 의미가 약간 있지만 지연 로딩을 구현하는 데 사용되지는 않습니다.

간단히 말하면 jQuery._Deferred는 함수 큐입니다.

여러 함수를 저장합니다.
특정 시간에 저장된 모든 기능을 실행합니다.
실행 후 새로운 기능이 즉시 실행됩니다.
뭔가 비슷한 느낌이랄까? 그렇습니다. jQuery의 Ready 함수에는 이러한 논리가 있습니다. 실제로 jQuery 1.5의 Ready 함수가 여기에 접목되었습니다.

jQuery._Deferred는 다음 인터페이스를 제공합니다.

done: 함수(fn1, fn2, ...) 형식으로, 대기열에 함수를 추가하는 데 사용됩니다.
fire: 함수(context, args) 형식으로 context를 사용하여 이 개체를 지정하고 args를 사용하여 매개변수를 지정하고 대기열에 있는 모든 함수를 호출합니다. fire가 호출된 후 _Deferred는 isResolved 상태로 들어가고 이후 done에 대한 호출은 함수를 저장하지 않고 함수를 직접 호출합니다.
resolve: 단순화된 메서드인 fire(this, 인수)를 호출하는 것과 동일합니다.
isResolved: _Deferred가 isResolved 상태인지 확인하는 데 사용됩니다. 자세한 내용은 이전 화재 함수 설명을 참조하세요.
취소: 전체 대기열을 취소하여 향후 화재 발생 여부에 관계없이 대기열에 있는 함수가 다시 호출되지 않도록 합니다.
이제 jQuery._Deferred에 대해 명확하게 설명했으니 이제 jQuery.Deferred를 살펴보겠습니다. 이것은 실제로 두 개의 _Deferred로 구성됩니다. 첫 번째는 "정상" 상태에서 함수를 저장하는 데 사용되는 deferred이고, 두 번째는 "오류" 상태에서 함수를 저장하는 데 사용되는 것입니다. 동시에 jQuery.Deferred는 몇 가지 새로운 인터페이스를 제공합니다.

그런 다음 함수(done, failure) 형식으로 deferred에 done을 추가하고 failedDeferred에 실패합니다.
fail: failureDeferred의 done 함수와 동일합니다.
fireReject: failureDeferred의 실행 기능과 동일합니다.
reject: failureDeferred의 해결 기능과 동일합니다.
isRejected: 실패Deferred의 isResolved 함수와 동일합니다.
동시에 jQuery.Deferred는 취소 기능을 취소합니다.

그럼 이건 무슨 용도인가요? "정상"과 "오류"의 두 가지 상태가 있으며 동시에 비동기식이라고 생각하면 쉽습니다. 네, AJAX에 사용됩니다. 자세한 내용은 다음 분석에서 설명하겠습니다.

jQuery.ready의 변경 사항
jQuery._Deferred로 인해 jQuery.ready 함수는 함수 대기열에 종속됩니다.

원래 ReadyList 변수는 더 이상 배열이 아니지만 jQuery._Deferred 객체가 됩니다.

DOMContentLoaded가 이제 jQuery._Deferred에서도 사용될 때 readList의 모든 함수를 호출하는 원래 논리. 원래 코드:

코드 복사 코드는 다음과 같습니다.

while ( (fn = Ready[ i ]) ) {
fn.call( document, jQuery )
}

은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

readyList .fire( document , [ jQuery ] );

jQuery.parseXML 함수
브라우저 호환 슬레이브 문자를 제공하기 위해 새로운 정적 함수 jQuery.parseXML을 추가했습니다. 문자열을 XML 문서로 변환하는 기능.

이 함수에는 많은 논리가 있으며 jQuery에는 특별한 것이 없습니다. 크게 다음 두 가지 유형으로 나뉩니다.

표준 브라우저의 경우 DOMParser 개체를 사용합니다.

코드 복사 코드는 다음과 같습니다.

var parser = new DOMParser(); xml = parser.parseFromString(text , 'text/html'); IE의 경우 Microsoft.XMLDOM 개체를 사용합니다.

var parser = new ActiveXObject('Microsoft.XMLDOM')
parser.async = 'false';
파서.loadXML(텍스트)
var xml = 파서.documentElement;
데이터 섹션
요소에 jQuery에 의해 첨부된 데이터가 있는지 확인하는 데 사용되는 jQuery.hasData 함수가 추가되었습니다.

jQuery.expando의 구현을 수정했습니다. 단순히 현재 시간을 가져오는 것 외에도 임의의 숫자가 추가되었습니다.

expando = "jQuery" ( jQuery.fn.jquery Math.random( ) ).replace( /D/g, "" ); 이렇게 하면 여러 jQuery 복사본이 동시에 도입되고 이러한 복사본 간의 확장이 서로 충돌하여 요소의 데이터가 혼란스러워지지 않습니다. 일반적으로 jQuery의 여러 복사본은 도입되지 않지만 SealJS 등을 사용할 때 구성이 잘못되면 이러한 문제가 쉽게 발생할 수 있습니다.

DOM 연산 부분
원래 hasClass, addClass, RemoveClass 함수는 모두 요소의 class 속성을 배열로 분리해야 합니다. 1.5에서 새로운 것을 추가했습니다. , Windows 플랫폼에서 개행 문자(rn)에 해당하는 데 사용됩니다.

jQuery.fn.attr 함수는 버전 1.4.4에서는 TextNode 및 CommentNode에서 속성 가져오기를 거부하고, 버전 1.5에서는 AttributeNode(noteType == 2)가 추가됩니다.

버전 1.4.4에서는 jQuery가 페이지가 언로드될 때 jQuery가 유지 관리하는 모든 DOM 이벤트를 정리합니다. 이는 IE의 메모리 누수 문제를 방지하기 위한 것입니다. 그런데 이 코드가 1.5에서는 사라졌습니다. 이유는 모르겠습니다.

IE에서 cloneNode를 사용하여 노드를 복사하는 문제와 관련하여 이벤트도 함께 복사됩니다. 1.4.4에서는 innerHTML을 복사하는 방법으로 해결되었지만, 1.5에서는 mootools 팀에서 제공하는 방법으로 해결되었습니다. 이 문제를 해결하려면 cloneFixAttribute 함수를 사용하세요.

cloneFixAttribute 함수는 jQuery 1.5 베타1 소스 코드 파일의 5388-5438 라인에 있습니다. IE 버그를 처리하는 원리는 매우 간단합니다. find:

IE에는clearAttributes라는 함수가 있는데, 이 함수는 노드의 모든 속성을 삭제합니다. 그런데 이벤트와 관련된 onclick과 같은 속성도 제거됩니다. 복사된 노드에서 이 함수를 호출하면 속성이 지워집니다.
IE에는 mergeAttributes라는 함수도 있는데, 이 함수는 한 노드의 속성을 다른 노드에 복사하지만 이벤트와 관련된 속성은 복사하지 않습니다. 따라서 원래 노드에서 mergeAttributes를 호출하고 속성을 복사된 노드에 다시 배치하는 것은 이벤트 관련 속성을 제거하는 것과 같습니다.
또한 cloneFixAttribute 함수는 cloneNode에서 IE6-8의 많은 호환성 문제도 처리하므로 자세히 연구할 가치가 있습니다.

AJAX 부분
AJAX는 1.4.4 버전의 스타일을 유지하기 위해 몇 부분만 남기고 완전히 새로 작성되었습니다. 여기서는 간략한 설명을 위해 일부만 추출합니다.

원본 버전의 $.get 및 $.post 구현은 매우 유사합니다. 특히 메서드 구성 항목이 하나만 다르기 때문에 버전 1.5에서 병합되었습니다.

코드 복사 코드는 다음과 같습니다.

$.each(['get', 'post'], function(i , method) {
$[method] = function() { ... };
})

이제 ajaxSetup 함수는 return this; 체인으로 호출됩니다.

이제 serializeArray 함수는 값의 개행 문자를 Windows 스타일(rn)로 균일하게 바꿉니다.

AJAX 콜백 함수에서 매개변수로 사용되는 객체는 더 이상 기본 XMLHTTPRequest가 아니라 jQuery 자체에 의해 캡슐화된 jXHR이라는 객체입니다. 이 객체는 XMLHTTPRequest에 대한 공통 인터페이스를 제공합니다.

원래 200-299 및 304 외에도 "요청 성공" 브라우저 상태 코드에 대한 1223도 있습니다. 이는 204 상태 코드를 1223으로 변경하는 IE의 BUG에서 발생합니다. 이제 jXHR 개체로 인해 중간에 있는 추가 레이어와 동일하므로 jXHR 개체에서 얻은 statusCode는 1223으로 표시되지 않고 다시 204로 변경되었습니다.

jQuery.ajax 함수의 구성 항목에는 추가 statusCode 항목이 있습니다. 해당 구조는 특정 상태 코드를 반환할 때 콜백 함수를 지정하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

jQuery.ajax({
url: 'xxx',
statusCode: {
200: function() {요청을 처리하는 중},
404: function() {처리 페이지를 찾을 수 없음},
503: function() {서비스 처리 중 이용 불가}
}
})

이 콜백을 추가한 후 jQuery.ajax 함수에는 이미 많은 콜백 함수가 있습니다. 트리거 프로세스는 다음과 같습니다.

반환된 상태 코드를 기반으로 성공 또는 오류 콜백을 트리거합니다.
상태 코드에 따라 해당 statusCode 콜백을 트리거합니다.
전체 콜백을 트리거합니다.
전역 ajaxComplete 콜백을 트리거합니다.
현재 실행 중인 AJAX가 없으면 전역 ajaxStop 콜백을 트리거합니다.
기타 세부 정보
입력 함수 jQuery.fn.init에는 이제 추가 매개변수가 있으며, 값은 항상 rootjQuery이며, 이는 init에서 rootjQuery 변수의 검색 속도를 높이는 데 사용됩니다. function(효과 계층 감소 도메인):

//jQuery 1.5 beta1 소스 코드 줄 23
jQuery = function( selector, context) {
// jQuery 객체는 실제로는 단지 init입니다. constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery )
}jQuery 객체 지원이 상속되었습니다. 구체적인 수정 사항은 jQuery를 직접 호출하는 여러 코드를 변경하는 것입니다. 생성자:

202행: return this.constructor( context ).find( selector )
253행: var ret = this.constructor()
334행: return this.prevObject | | this.constructor(null) ;동시에 jQuery를 상속하는 유형을 생성하기 위해 jQuery.subclass 함수도 제공됩니다. jQuery는 널리 사용되지 않으며 jQuery를 상속하는 데 사용된 적이 없기 때문에 이 기능이 얼마나 유용한지 말하기는 쉽지 않습니다.