jQuery 소스코드 분석-05 비동기 큐 지연 사용 소개_jquery

// 완전한 연기(두 개의 콜백 목록)
// 완전한 비동기 대기열 생성(두 개의 콜백 함수 배열 포함)
// 비동기 대기열에는 세 가지 상태가 있습니다: 초기화(해결되지 않음) , 성공(해결됨), 실패(거부됨).
// 어떤 콜백 함수가 실행되는지는 상태에 따라 다릅니다.
// 상태가 해결됨 또는 거부됨으로 변경된 후에도 변경되지 않습니다.
Deferred: function( func ) {
// _Deferred에는 성공 또는 실패 상태가 없습니다. 초기화, 실행, 실행 완료, 취소의 네 가지 상태가 있습니다.
// 코드 재사용을 위해 내부에서 먼저 _Deferred를 구현했습니다.
// 클로저를 통해 참조되는 failureDeferred
var deferred = jQuery._Deferred(),
failDeferred = jQuery._Deferred(),
promise
// errorDeferred 메서드 추가, then 및 promise
jQuery.extend( deferred, {
// 성공 콜백 함수와 실패 콜백 함수를 해당 큐에 추가
// 편의 메서드, 두 매개 변수는 배열 또는 null일 수 있음
// 즉시 호출 상태가 성공(해결)인 경우 성공 콜백 함수
// 상태가 실패(거부)인 경우 즉시 실패 콜백 함수를 호출합니다.
then: function( doneCallbacks, failureCallbacks ) {
/ / 가 있습니다. 여기에서 컨텍스트 전환: done이 deferred를 반환하지만, 실패는 실패가 실행될 때, 컨텍스트가 failureDeferred로 변경됩니다.
// 간단히 말하면:
// 호출할 때 deferred에 콜백을 추가합니다. done 함수 doneCallbacks
// 실패 실패 콜백을 호출할 때 failureDeferred에 콜백 함수를 추가합니다.
// 따라서 이 표현식 줄이 실행된 후, failureDeferred
deferred.done( doneCallbacks ).fail( 실패Callbacks ); 🎜>// 강제 반환 연기
return this;
},
// 해결 또는 거부 여부에 따라 호출되는 콜백 함수를 등록합니다.<… {
// done의 컨텍스트는 deferred로 설정되고, 실패의 컨텍스트는 이것으로 설정됩니다.
// done과 failure의 컨텍스트가 일치하지 않나요? 일관된! 여기서는 deferred와 같습니다
// 그런데 이렇게 설정된 컨텍스트를 어떻게 해석해야 할까요? 그때의 구현과 어떻게 다른가요?
// 실패는 실패 지점이고 실패는 실패 Deferred입니다. 실패Deferred의 콜백 함수 배열 콜백은 클로저를 통해 참조됩니다. deferred.failDeferred.done의 실행에는 영향을 미치지 않습니다.
// 체인 호출을 구현하려면 실패Deferred.done의 끝에서 이것을 deferred로 바꿉니다.
// 즉, 이 컨텍스트는 도중에 손실되지 않습니다. 이러한 혼란을 일으키지 않고 다른 체인 호출을 계속 호출할 수 있습니다
// 문법적으로 Always 에 의해 달성되는 효과는 then에 의해 달성되는 효과와 일치합니다
// 따라서 이는 한 줄의 코드를 두 줄로 다시 작성할 수 있으며( then 구현과 유사) 효과는 동일합니다.
// deferred.done( 인수 ).fail( 인수 )
// returnr this; >return deferred.done.apply( deferred, 인수 ).fail.apply( this, 인수 );
},
// 실패 콜백 함수 추가
// 실패 상태일 때 즉시 호출됨(거부됨) )
fail: 실패Deferred.done,
// 지정된 컨텍스트와 매개변수를 사용하여 실패 콜백 함수 대기열을 실행합니다
// 실패Deferred.rejectWith()를 호출하여
rejectWith: 실패Deferred.resolveWith,
// 실패 콜백 함수 대기열이 호출됩니다
// failureDeferred .resolve()를 호출하여
reject: 실패Deferred.resolve,
// 상태가 성공(해결됨)인지 확인
isRejected : failureDeferred.isResolved,
// 매번 전달된 콜백 함수를 호출합니다. 성공 필터 함수 또는 실패 필터 함수를 입력하고, 필터 함수의 반환 값을 콜백 함수의 매개 변수로 사용합니다.
// 최종 반환 읽기 전용 뷰(구현 약속 호출)
// fnDone이 성공 상태인지 여부(해결되면 호출됨)
// 상태가 거부될 때 fnFail이 호출됨(rejected)
/ / 기타 설명에 대해:
// 1. 일부 기사는 "파이프라인 메커니즘"으로 번역됩니다. 문자 그대로의 의미를 이해할 수 없으므로 적어도 부정확합니다
// 2. 잘못된 이해: 소위 파이프는 들어오는 fnDone 및 fnFail을 성공 대기열 및 실패 대기열 배열의 헤드에 넣습니다
pipe : function( fnDone, fnFail ) {
return jQuery.Deferred(function( newDefer ) {
jQuery.each( {
done: [ fnDone, "resolve" ], // done은 나중에 텍스트 deferred.done
fail: [ fnFail, "reject" ]
}, function ( 핸들러, 데이터 ) {
var fn = data[ 0 ],
action = data[ 1 ],
returned
if ( jQuery.isFunction( fn ) ) {
deferred[ handler ](function() {
returned = fn.apply( this, 인수 );
if ( return && jQuery .isFunction( return.promise ) ) {
returned.promise().then( newDefer .resolve, newDefer.reject );
} else {
newDefer[ 액션 ]( 반환됨 )
}
}) else {
deferred[ 핸들러 ]( newDefer [ action ] );
}
});
}).promise();
} ,
// obj가 제공되는 경우 , Promise 측면이 개체에 추가됩니다
// 반환되는 것은 해결 및 거부가 없는 불완전한 Deferred 인터페이스입니다. 즉, Deferred 개체의 상태를 수정할 수 없습니다.
// 이는 방지하기 위한 것입니다. 외부 함수는 콜백 함수를 조기에 트리거하지 않으며 읽기 전용 뷰로 간주될 수 있습니다.
//
// 예를 들어 $.ajax는 버전 1.5 이후 더 이상 XMLHttpRequest를 반환하지 않지만 XMLHttpRequest 및 Deferred 개체 인터페이스를 캡슐화하는 개체를 반환합니다.
// Deferred 부분은 promise()에 의해 획득됩니다. 이는 외부 함수가 Resolve 및 Reject를 호출하는 것을 방지하고 Ajax가 완료되기 전에 콜백 함수가 트리거되는 것을 방지합니다.
// 이 두 함수의 호출 권한을 Ajax 내부적으로 예약하세요.
promise: function( obj ) {
if ( obj == null ) {
// Promise는 실제로 한 번만 실행되며 첫 번째 실행 결과는 Promise 변수에 저장됩니다
if ( promise ) {
return promise;
}
promise = obj = {};
}
var i = promiseMethods.length;// <를 반복하는 또 다른 방법 🎜 >// 나는 다음을 사용하는 데 익숙합니다:
// for( i = 0; i < len; i ) 또는 for( i = len-1; i >=0; i-- ) 또는 for( i = len ; i--; )
// jQuery는 정말 어디에서나 보물입니다!
while( i-- ) {
obj[ promiseMethods[i] ] = deferred[ promiseMethods[i] ]
}
return obj;
}
}); 🎜>// 하나의 콜백 목록만 사용하도록 하세요
// 성공적인 큐 실행이 완료된 후 실패 큐 취소 메소드가 실행됩니다
// 실패 큐 실행이 완료된 후 성공한 큐가 취소 메서드가 실행됩니다
// 하나의 함수 큐, 즉 실행 성공 큐 또는 실행 실패 큐만 실행되도록 합니다.
// 즉, 상태는 성공 또는 하나만 가능합니다. 실패, 교차 호출 없음
// deferred 및 실패Deferred의 취소된 속성은 클로저를 통해서만 참조할 수 있으므로 상태와 컨텍스트의 혼동에 대해 걱정할 필요가 없습니다
deferred.done( failureDeferred.cancel ).fail( deferred.cancel );
// Unexpose cancel
// 취소 인터페이스를 숨깁니다. 즉, 성공한 함수 대기열을 외부에서 취소할 수 없습니다.
deferred.cancel
// 호출 func if any
// 수신 func 함수 실행
if ( func ) {
func.call( deferred, deferred )
return deferred;

5.5 jQuery.when

i = 0,
length = args.length,
count = length,
//args.length가 1이고 firstParam이 Deferred인 경우 deferred=firstParam
// 그렇지 않은 경우 , 새 Deferred 객체 생성(arguments.length가 0이거나 1보다 큰 경우 새 Deferred 객체 생성)
// jQuery.isFunction( firstParam.promise )을 통해 Deferred 객체인지 여부를 간단히 확인
deferred = length <= 1 && firstParam && jQuery.isFunction( firstParam.promise ) ?
firstParam :
jQuery.Deferred()
// 성공적인(해결) 콜백 함수 구성
functionsolveFunc( i ) {
return function( value ) {
// 전달된 매개변수가 1보다 크면 들어오는 매개변수를 실제 배열로 변환합니다(인수에는 슬라이스 메서드가 없으므로 빌림). 알을 낳을 닭)
args[ i ] = 인수.길이 > 1 ? SliceDeferred.call( 인수, 0 ) : value; / FF4의 이상한 버그:
// 인수 객체로 변경된 값이 $.when 메소드 외부에서 정의되지 않은 값으로 끝나는 경우가 있습니다. 객체를 새로운 배열로 복제하면 문제가 해결됩니다. 🎜>// 성공적으로 실행된 콜백 함수 큐, 컨텍스트는
deferred.resolveWith( deferred, SliceDeferred.call( args, 0 ) )
}
}에 전달된 첫 번째 Deferred 객체로 강제 적용됩니다. 🎜>}
// 매개변수가 두 개 이상인 경우
if ( length > 1 ) {
for( ; i < length; i ) {
// 간단히 여부만 확인 지연된 객체인 경우 .promise().then()을 호출하고, 그렇지 않으면
if ( args[ i ] && jQuery.isFunction( args[ i ].promise ) ) {
//성공 콜백 추가를 무시합니다. 함수 및 실패 콜백 함수를 해당 대기열에
args[ i ].promise().then( resolveFunc(i), deferred.reject )
} else {
// 카운터, 이를 나타냅니다. Deferred 객체가 아니라 일반 JavaScript 객체임을 발견했습니다.
--count;
}
}
// 카운터가 0이면 전달된 매개변수가 하나도 없다는 뜻입니다. 지연된 객체
// 실행 성공 콜백 함수 대기열, 컨텍스트는 강제로 전달된 첫 번째 지연된 객체가 됩니다.
if ( !count ) {
deferred.resolveWith( deferred, args )
}
// deferred !== firstParam, 즉 deferred는 새로 생성된 Deferred 객체입니다.
// 즉, length == 0
} else if ( deferred !== firstParam ) {
// 성공적인 실행을 위한 콜백 함수 대기열, 컨텍스트는 새로 생성된 Deferred 객체에 강제 적용됩니다.
deferred.resolveWith( deferred, length ? [ firstParam ] : [] )
// 첫 번째 반환 전달된 지연 또는 새로 생성된 객체의 지연된 읽기 전용 보기
return deferred.promise();
}



5.6 지연된 애플리케이션
l jQuery. ajax()
n TODO
5.7 배울 수 있는 기술
l 클로저




코드 복사