jQuery_jquery의 PushStack 구현 원리 및 애플리케이션 예제

pushStack은 jQuery 커널에서 매우 중요한 기능으로 많은 jQuery 내부 기능에서 자주 사용됩니다. 일반적인 상황에서는 거의 사용되지 않지만 이 기능을 익히면 jQuery의 작동 원리를 이해하는 데 도움이 될 뿐만 아니라 더 고급 jQuery 작업을 수행하는 데도 도움이 됩니다.

이름에서 알 수 있듯이 pushStack은 데이터 구조로서 한쪽 끝에서만 삽입 및 삭제 작업을 수행할 수 있는 특수 선형 테이블입니다. 데이터가 스택에 푸시되는 경우는 아래와 같이 엘리베이터에 들어갈 때와 유사합니다. 후입선출 방식입니다.

jQuery의 스택은 실제로 실제 스택이 아닙니다. 대신 jQuery 객체에 속성을 첨부하여 현재 객체의 이전 객체를 가리키며, 이전 요소는 end 메소드를 통해 반환될 수 있습니다. 다음과 같습니다:

<span>1</span>
<span>2</span>
<span>3</span>
<script>
$('span').eq(0).css('fontSize','20px').end().fadeOut(2000);
</script>

위 코드는 첫 번째 범위의 글꼴 크기를 20px로 만들고 2초 이내에 모든 범위가 페이드아웃되도록 합니다.

pushStack은 jQuery의 인스턴스 메소드로 $().pushStack(document.getElementsByTagName('div')).css('Background','를 통해 모든 div의 배경을 설정하는 등 jQuery 객체를 통해 호출됩니다. 파란색')은 파란색입니다. 그렇다면 pushStack의 원리는 무엇이며 왜 들어오는 DOM 객체를 CSS 메소드로 조작할 수 있습니까? 먼저 jQuery에서 pushStack 소스 코드를 살펴보겠습니다.

pushStack: function( elems ) {
 // Build a new jQuery matched element set
 var ret = jQuery.merge( this.constructor(), elems );
 // Add the old object onto the stack (as a reference)
 ret.prevObject = this;
 ret.context = this.context;
 // Return the newly-formed element set
 return ret;
}
//jQuery.merge
merge: function( first, second ) {
 var l = second.length,
 i = first.length,
 j = 0;
 if ( typeof l === "number" ) {
 for ( ; j < l; j++ ) {
  first[ i++ ] = second[ j ];
 }
 } else {
 while ( second[j] !== undefined ) {
  first[ i++ ] = second[ j++ ];
 }
 }
 first.length = i;
 return first;
}

pushStack의 구현은 상대적으로 간단하며 주로 jQuery의 정적 메소드 병합을 포함합니다. 이 메소드는 객체를 병합하는 데 사용됩니다. 디자인 아이디어는 첫 번째 객체를 기반으로 두 번째 객체의 속성(0~n)을 추가하는 것입니다. . 올라가세요. 이것을 이해하는 것이 중요합니다. pushStack 함수로 돌아가서 먼저 병합된 개체를 저장할 지역 변수 ret을 정의한 다음 이 개체에 대한 prevObject 및 컨텍스트 속성을 저장하고 마지막으로 병합된 ret 개체를 반환합니다. 몇 가지 참고할 사항은 다음과 같습니다.
1. this.constructor는 jQuery의 생성자 init이므로 this.constructor()는 jQuery 객체를 반환합니다.
2. jQuery 병합 함수에 의해 반환된 객체는 첫 번째 함수에 추가된 두 번째 함수이므로 ret도 jQuery 객체입니다. 이는 pushStack 내부 및 외부의 DOM 객체도 CSS 메서드로 작동할 수 있는 이유를 설명할 수 있습니다.
3. 반환된 객체의 prevObject 속성은 이전 객체를 가리키므로, 이 속성을 통해 스택의 이전 객체를 찾을 수 있습니다.