jQuery 소스코드 분석-03 jQuery 객체 구성하기 - 소스코드 구조와 핵심함수_jquery

작성자: nuysoft/Gao Yun QQ: 47214707 이메일: nuysoft@gmail.com
결국 읽고 쓰는 일을 동시에 하고 있으니 틀린 부분이 있으면 말씀해 주시면 더 많이 소통하며 함께 발전해 나갈 수 있습니다. 이 장은 아직 끝나지 않았습니다. 완료되면 PDF가 제출될 것입니다.
서문:
체계적으로 쓰고 싶지만 먼저 흥미로운 부분부터 시작하겠습니다.
최근 한 독자가 바이두웬쿠에 PDF를 올렸습니다. 우선 재인쇄하여 퍼뜨려주셔서 감사합니다. 하지만 가지고 있는 것은 좋지 않으며, 다운로드할 수 있도록 높은 가치를 설정해 놓겠습니다. 나중에 Wenku에 업로드하세요. 배려해 주십시오.
3. jQuery 객체 구성
3.1 소스 코드 구조
전체 구조를 먼저 살펴보고 분해해 보겠습니다.

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

(function( window, undefine ) {
var jQuery = (function() {
// jQuery 구축 object
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery )
}
// jQuery 개체 프로토타입
jQuery.fn = jQuery.prototype = {
생성자: jQuery,
init: function( selector, context, rootjQuery ) {
// 선택기에는 다음과 같은 7개의 분기가 있습니다.
// DOM 요소
// 본문(최적화)
// 문자열: HTML 태그, HTML 문자열, #id, 선택기 표현식
// 함수(준비된 콜백 함수)
// 마지막으로 의사 배열 반환
}
};
// 나중에 인스턴스화하기 위해 초기화 함수에 jQuery 프로토타입을 제공합니다.
jQuery.fn.init.prototype = jQuery.fn
// 콘텐츠를 첫 번째 매개변수에 병합하고 대부분 후속 함수는 이 함수 확장을 통과합니다.
// jQuery.fn.extend에 의해 확장된 대부분의 함수는 jQuery.extend에 의해 확장된 동일한 이름의 함수를 호출합니다.
jQuery.extend = jQuery.fn.extend = function() {};
// jQuery에서 정적 메서드 확장
jQuery.extend({
// 준비 바인딩 준비
// isPlainObject isEmptyObject
//parseJSON parseXML
// globalEval
// 각 makeArray inArray 병합 grep 맵
// 프록시
// 액세스
// uaMatch
// 하위
// 브라우저
}); >// 여기에서 jQuery 객체 생성이 완료되었으며 다음 코드는 모두 jQuery 또는 jQuery 객체의 확장입니다.
return jQuery;
})()
window.jQuery = window.$ = jQuery ;
})(window );

l jQuery 객체는 새로운 jQuery를 통해 생성되지 않고, 새로운 jQuery.fn.init를 통해 생성됩니다.

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

var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}

n jQuery 객체는 jQuery.fn.init 객체입니다.
n new jQeury()가 실행되면 생성된 jQuery 객체는 삭제되고 최종적으로 jQuery.fn.init 객체가 반환됩니다. 따라서 jQuery(selector, context)를 직접 호출할 수 있습니다. 먼저 jQuery.fn = jQuery.prototype을 실행하세요. , jQuery.fn.init.prototype = jQuery.fn을 실행합니다. 병합된 코드는 다음과 같습니다.
jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype
jQuery에 탑재된 모든 메서드입니다. fn은 jQuery.prototype에 마운트되는 것과 동일합니다. 즉, jQuery 함수에 마운트되는 것(처음에는 jQuery = function(selector, context))이지만 결국에는 jQuery.fn.init.prototype에 마운트되는 것과 같습니다. , 이는 처음에 jQuery 함수에 의해 반환된 객체에 마운트하는 것과 동일합니다. 즉, jQuery 객체에 최종적으로 사용하는 객체에 마운트하는 것과 같습니다.
이 과정은 매우 복잡하며 금과 옥이 중간에 "분실"됩니다!
3.2 jQuery.fn.init
jQuery.fn.init의 기능은 들어오는 선택기 매개변수를 분석하고 다양한 처리를 수행한 후 jQuery 객체를 생성하는 것입니다.
유형(선택기)
처리 방법
DOM 요소
는 jQuery 객체로 패키징되어 있으며
body(최적화)를 직접 반환합니다.
document.body에서 개별 HTML 태그를
읽습니다.
document.createElement
HTML 문자열
document.createDocumentFragment
#id
document.getElementById
선택기 표현식
$(…).find
함수
등록 dom 준비 콜백 함수
3.3 jQuery.extend = jQuery.fn.extend

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

// 두 개 이상의 객체 속성을 첫 번째 객체로 병합합니다. 대부분의 jQuery 후속 함수는 이 함수를 통해 확장됩니다.
// jQuery.fn.extend를 통해 확장되는 함수 중 대부분은 jQuery.extend에 의해 확장된 동일한 이름의 함수 호출
// 두 개 이상의 객체가 전달되면 모든 객체의 속성이 첫 번째 객체 대상에 추가됩니다
// 하나만 전달되는 경우 개체, 개체의 속성을 jQuery 개체에 추가합니다.
// 이런 방식으로 jQuery 네임스페이스에 새로운 메서드를 추가할 수 있습니다. jQuery 플러그인을 작성하는 데 사용할 수 있습니다.
// 전달된 객체를 변경하지 않으려면 빈 객체를 전달할 수 있습니다. $.extend({}, object1, object2)
// 기본 병합 작업은 반복적이지 않습니다. , 대상 중 하나라도 속성이 객체 또는 속성인 경우 병합되지 않고 완전히 덮어쓰게 됩니다
// 첫 번째 매개변수가 true이면 반복적으로 병합됩니다
// 객체에서 상속된 속성 프로토타입이 복사됩니다
// 정의되지 않은 값은 복사되지 않습니다
// 성능상의 이유로 JavaScript의 내장 유형 속성은 병합되지 않습니다
// jQuery.extend( target, [ object1 ] , [ objectN ] )
// jQuery.extend ( [ deep ], target, object1, [ objectN ] )
jQuery.extend = jQuery.fn.extend = function() {
var 옵션, 이름 , src, copy, copyIsArray, clone,
target = 인수[0] || {},
i = 1,
length =args.length,
deep = false
/ / 딥 카피 상황 처리
// 하나의 매개변수가 부울 유형인 경우 딥 카피가 가능합니다.
if ( typeof target === "boolean" ) {
deep = target
target = 인수[1] || {};
// 부울과 대상을 건너뜁니다.
// 세 번째부터 부울과 대상을 건너뜁니다.
i = 2; // target이 문자열 등인 경우 처리(딥 카피에서 가능)
// target이 객체도 함수도 아닌 경우 강제로 빈 객체가 됩니다.
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {}
}
// 인수가 하나만 전달된 경우 jQuery 자체 확장
// 인수가 하나만 전달된 경우; , 이는 jQuery
if ( length === i ) {
target = this
--i;
}
for ( ; i < length; ; i ) {
// null이 아닌/정의되지 않은 값만 처리 ​​
//null이 아닌 매개변수만 처리
if ( (options = 인수[ i ]) != null ) {
// 기본 객체 확장
for ( name in options ) {
src = target[ name ]
copy = options[ name ]
// 무한 루프 방지
// 순환 참조를 피하세요
if ( target === copy ) {
continue;
}
// 일반 객체나 배열을 병합하는 경우 재귀
// 전체 복사 및 값이 순수 객체 또는 배열인 경우
if ( deep && copy && ( jQuery.isPlainObject( copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
// If copy is 배열
if ( copyIsArray ) {
copyIsArray = false;// clone is src 수정 값
clone = src && jQuery.isArray(src) ? / 복사본이 객체인 경우
} else {
// clone은 src의 수정 값입니다.
clone = src && jQuery.isPlainObject(src) ? src :
}
// 원본 객체를 이동하지 말고 복제하세요.
// jQuery.extend를 재귀적으로 호출합니다.
target[ name ] = jQuery.extend( deep, clone, copy )// 정의되지 않은 항목을 가져오지 마세요. 값 ​​
// 빈 값을 복사할 수 없습니다 ​​
} else if ( copy !== undefine ) {
target[ name ] = copy;
}
// 수정된 객체 반환
// 수정된 객체 반환
반환 대상
}


계속