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 );
return new jQuery.fn.init( selector, context, rootjQuery );
}
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;
}
// 수정된 객체 반환
// 수정된 객체 반환
반환 대상
}
계속
핫 AI 도구
Undress AI Tool
무료로 이미지를 벗다
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
node.js에서 HTTP 요청을하는 방법?
Jul 13, 2025 am 02:18 AM
Node.js에서 HTTP 요청을 시작하는 세 가지 일반적인 방법이 있습니다. 1. 기본 시나리오에 적합하지만 데이터 스티칭 및 오류 모니터링의 수동 처리 및 https.get () 사용과 같은 데이터 스티치 및 오류 모니터링의 수동 처리가 필요합니다. 2.axios는 약속을 기반으로 한 타사 도서관입니다. 간결한 구문과 강력한 기능을 가지고 있으며 비동기/기다림, 자동 JSON 변환, 인터셉터 등을 지원합니다. 비동기 요청 작업을 단순화하는 것이 좋습니다. 3. 노드 페치는 약속과 간단한 구문을 기반으로 브라우저 페치와 유사한 스타일을 제공합니다.
JavaScript 데이터 유형 : 원시 대 참조
Jul 13, 2025 am 02:43 AM
JavaScript 데이터 유형은 원시 유형 및 기준 유형으로 나뉩니다. 원시 유형에는 문자열, 숫자, 부울, 널, 정의되지 않은 및 기호가 포함됩니다. 값은 불변이없고 값을 할당 할 때 사본이 복사되므로 서로 영향을 미치지 않습니다. 객체, 배열 및 함수와 같은 참조 유형은 메모리 주소를 저장하고 동일한 개체를 가리키는 변수는 서로 영향을 미칩니다. 타입 및 인스턴스는 유형을 결정하는 데 사용될 수 있지만 TypeofNull의 역사적 문제에주의를 기울일 수 있습니다. 이 두 가지 유형의 차이점을 이해하면보다 안정적이고 안정적인 코드를 작성하는 데 도움이 될 수 있습니다.
JavaScript에서 객체 배열을 필터링합니다
Jul 12, 2025 am 03:14 AM
JavaScript의 필터 () 메소드는 모든 통과 테스트 요소를 포함하는 새로운 배열을 만드는 데 사용됩니다. 1.Filter ()는 원래 배열을 수정하지 않고 조건부 요소를 충족하는 새 배열을 반환합니다. 2. 기본 구문은 array.filter ((element) => {returnCondition;}); 3. 객체 배열은 30 세 이상의 필터링 사용자와 같은 속성 값으로 필터링 할 수 있습니다. 4. 연령 및 이름 길이 조건을 동시에 충족하는 것과 같은 다중 조건 필터링 지원; 5. 동적 조건을 처리하고 필터 매개 변수를 기능으로 전달하여 유연한 필터링을 달성 할 수 있습니다. 6. 그것을 사용할 때는 빈 배열을 반환하지 않기 위해 부울 값을 반환하고 다른 방법을 결합하여 문자열 일치와 같은 복잡한 논리를 달성하십시오.
배열에 javaScript 값이 포함되어 있는지 확인하는 방법
Jul 13, 2025 am 02:16 AM
JavaScript에서 배열에 특정 값이 포함되어 있는지 확인하십시오. 가장 일반적인 방법은 부울 값을 반환하는 ()와 구문이 array.includes (valuetofind)입니다. 이전 환경과 호환 해야하는 경우 숫자. indexof (20)! == -1과 같은 indexof ()를 사용하십시오. 객체 또는 복잡한 데이터의 경우 user.some (user => user.id === 1)과 같은 심층 비교에 일부 () 메소드를 사용해야합니다.
Async/Await JavaScript 함수의 오류 처리
Jul 12, 2025 am 03:17 AM
비동기 함수의 오류를 처리하려면 시도/캐치를 사용하고 통화 체인에서 처리하고 .catch () 메소드를 사용한 후 처리되지 않은 반응 이벤트를 듣습니다. 1. 시도/캐치를 사용하여 오류를 잡는 오류는 명확한 구조와 함께 권장되는 방법이며 기다릴 수있는 예외를 처리 할 수 있습니다. 2. 통화 체인의 오류 처리는 중앙 집중식 로직 일 수 있으며, 이는 다단계 프로세스에 적합합니다. 3. Async 함수를 호출 한 후 .catch ()를 사용하여 약속 조합 시나리오에 적합합니다. 4. 처리되지 않은 거부를 마지막 방어선으로 기록하기 위해 처리되지 않은 주사 사건을 듣습니다. 위의 방법은 공동으로 비동기 오류가 올바르게 캡처되고 처리되도록 보장합니다.
JavaScript에서 시간대를 처리하는 방법?
Jul 11, 2025 am 02:41 AM
JavaScript 시간대 문제를 다루는 핵심은 올바른 방법을 선택하는 것입니다. 1. 기본 날짜 객체를 사용하는 경우 UTC 시간에 저장 및 전송하여 표시 할 때 사용자의 로컬 시간대로 변환하는 것이 좋습니다. 2. 복잡한 시간대 조작의 경우 IANA 시간대 데이터베이스를 지원하고 편리한 형식 및 변환 기능을 제공하는 모멘트 타임 존을 사용할 수 있습니다. 3. 디스플레이 시간을 현지화해야하고 타사 라이브러리를 소개하지 않으려면 intl.dateTimeFormat을 사용할 수 있습니다. 4. 현대적인 경량 솔루션 Day.js 및 Timezone 및 UTC 플러그인에는 간결한 API, 우수한 성능이 있으며 시간대 전환을 지원하는 것이 좋습니다.
JavaScript 컨텍스트에서 설명 된 가상 DOM의 개념
Jul 12, 2025 am 03:09 AM
Virtual Dom은 실제 DOM 업데이트를 최적화하는 프로그래밍 개념입니다. 메모리에서 실제 DOM에 해당하는 트리 구조를 만들면 실제 DOM의 빈번하고 직접 작동을 피합니다. 핵심 원칙은 다음과 같습니다. 1. 데이터가 변경 될 때 새로운 가상 DOM을 생성합니다. 2. 새 가상 Doms와 오래된 가상 Doms의 가장 작은 차이를 찾으십시오. 3. 재 배열 및 재로 그리기의 오버 헤드를 줄이기 위해 실제 DOM의 배치 업데이트. 또한 고유 한 안정 키를 사용하면 목록 비교 효율성을 향상시킬 수있는 반면, 일부 현대 프레임 워크는 가상 DOM을 대체하기 위해 다른 기술을 채택했습니다.
기능 프로그래밍이란 무엇입니까? 핵심 개념의 JS 라운드 업
Jul 11, 2025 am 03:13 AM
FunctionProgrammingInjavaScriptEmphasizesscycizes, predictableCodeThroughCoreConcepts.1.PureFtionsConsentILTENTINTINTINTINTERTINTERTERNITHERTERNITHETHESTERINGPUTSTINGPUTWERSYEFFECTS
