jquery constructor_jquery 구현 코드 요약

분명히 이 단계를 달성하기 위한 구현은 상당히 복잡합니다. 이 구현은 jQuery의 실제 생성자인 init 메소드입니다. 버전 업그레이드로 기능도 업그레이드되어 점점 길어지고 있습니다.
2009년 1월 13일 버전 1.3 출시

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

init: function( selector, context ) {
// 선택 항목이 제공되었는지 확인
selector = selector || document
// 노드 매개변수를 처리하고 새 항목에 직접 속성을 추가합니다. 인스턴스
if ( selector.nodeType ) {
this[0] = selector;
this.context = selector;
return this; 🎜>// 문자열 매개변수 처리
if ( typeof selector === "string" ) {
// HTML 조각인지 ID인지 확인
var match = QuickExpr.exec( selector );
if ( match && (match[1] || !context) ) {
// HTML 조각인 경우 노드에서 구성된 배열을 변환합니다.
if ( match[1] )
selector = jQuery.clean( [ match[1] ], context );// ID인 경우 이 요소를 검색하고, 발견되면 빈 배열에 넣습니다.
else {
var elem = document.getElementById( match[3] ) ;
// 요소가 있는지 확인하세요
if ( elem ){
// IE에서 ID와 NAME이 혼동되는 버그를 처리하고 Opera
if ( elem.id != match[3] )
return jQuery().find( selector )
var ret = jQuery
ret.context = document; 🎜>ret.selector = selector;
return ret;
}
selector = [];
}
} else
//Sizzle을 사용하여 다른 CSS 표현식 처리 and return
return jQuery( context ).find( selector );
// 함수 매개변수 처리, 직접 domReady
} else if ( jQuery.isFunction( selector ) )
return jQuery( document ). Ready( selector );// jQuery 객체 매개변수 처리, 단순 새 인스턴스에 두 가지 속성 할당
if ( selector.selector && selector.context ) {
this.selector = selector.selector; 🎜>this.context = selector.context;
}
//위에서 얻은 노드 배열을 변환하고 setArray 메서드를 사용하여 이를 인스턴스 요소로 변환합니다.
return this.setArray(jQuery.makeArray(selector) );
},


2009년 2월 19일 버전 1.32 출시




코드 복사

코드는 다음과 같습니다.

init: function( selector, context ) { // 선택 항목이 제공되었는지 확인하세요 selector = selector || // 노드 매개변수를 처리하고 새 인스턴스에 속성을 직접 추가합니다. if ( selector.nodeType ) { this[0] = selector

this.length = 1

this.context = selector; ;
return this;
}
//문자 처리 문자열 매개변수
if ( typeof selector === "string" ) {
//HTML 조각인지 ID인지 확인
var match = QuickExpr.exec( selector );
if ( match && ( match[1] || !context) ) {
// HTML 조각인 경우 노드에서 구성된 배열을 변환합니다.
if ( match[1] )
selector = jQuery.clean( [ match[ 1] ], context )
else {
var elem = document.getElementById( match[3] );
// ID이면 이 요소를 검색하고, 찾으면 빈 배열에 넣습니다.
if ( elem && elem.id != match[3] )
return jQuery() .find( selector );
//버전 1.3에서는 일부 최적화가 이루어져 더욱 간결해졌습니다.
var ret = jQuery( elem || [] )
ret.context = document; 🎜>ret.selector = selector;
return ret;
}
} else
//Sizzle 사용 다른 CSS 표현식 처리, 인스턴스 생성 및 반환
return jQuery( context ).find( selector );
// 함수 매개변수 처리 및 domReady 작업 수행
} else if ( jQuery.isFunction( selector ) )
return jQuery( document ).ready( selector )//처리 jQuery 객체 매개변수를 지정하고 두 속성을 새 인스턴스에 할당하면 됩니다.
if ( selector.selector && selector.context ) {
this.selector = selector.selector
this.context = selector.context; 🎜>}
//다음은 요소 컬렉션(HTMLCollection)과 노드 컬렉션(NodeList)의 전송을 허용하는 버전 1.3의 일부 확장입니다.
//요소 배열은 문자열을 사용하여 변환할 수 있습니다. 사용자가 직접 전달할 수 있습니다.
return this.setArray(jQuery.isArray( selector ) ? selector : jQuery.makeArray (selector))
},


버전 1.4 2010-01-13 출시




코드 복사


코드는 다음과 같습니다

init: function( selector, context ) {
var match, elem, ret, doc
//빈 문자열, null, 정의되지 않은 매개변수(새로 추가됨)를 처리하고 매우 순수한 인스턴스를 반환합니다. of
if ( !selector ) {
return this;
}
// 노드 매개변수를 처리하고 새 인스턴스에 속성을 직접 추가합니다.
if ( selector.nodeType ) {
this .context = this[0] = selector;//최적화된 쓰기
this.length = 1;
return this;
}
//문자열 매개변수 처리
if( typeof selector == = "string" ) {
// HTML 조각인지 ID인지 확인
match = QuickExpr.exec( selector )
if ( match && (match[1] || !context) ) {
//HTML 조각인 경우
if ( match[1] ) {
//문서 객체 가져오기
doc = (context ? context.ownerDocument || context : document) ;
// 단일 태그인 경우 document.createElement를 직접 사용하여 이 노드를 생성하고 배열에 넣습니다.
ret = rsingleTag.exec( selector )
if ( ret ) {
//Pure JS 객체가 뒤에 오면 해당 속성이나 스타일을 이 노드에 추가하세요.
if ( jQuery.isPlainObject( context ) ) {
selector = [ document.createElement( ret[1] ) ]; >jQuery.fn.attr.call( 선택기, 컨텍스트, true );
} else {
selector = [ doc.createElement( ret[1] ) ]; 🎜>/ /buildFragment를 변경하여 노드 컬렉션 생성(NodeList)
ret = buildFragment( [ match[1] ], [ doc ] )
selector = (ret.cacheable ? ret.fragment.cloneNode(true) : ret .fragment).childNodes;
}
} else {
// ID인 경우 이 요소를 검색하고, 발견되면 빈 배열에 넣습니다.
elem = document .getElementById( match[2] );
if ( elem ) {
// IE와 Opera에서 ID와 NAME이 혼동되는 버그 처리
if ( elem.id !== match[2 ] ) {
return rootjQuery.find( selector );
}
//여기에서도 일부 최적화가 수행되었으며 다른 jQuery 인스턴스를 생성하는 것은 어리석은 것으로 나타났습니다.
this.length = 1;
this[0] = elem;
}
this.context = document;
this.selector =
return this; 문자는 매우 간단한 라벨 선택기이므로 기본적으로 Sizzle 경로로 갈 필요가 없습니다. getElementsByTagName을 직접 사용하면 매우 좋습니다.
} else if ( !context && /^w $/.test( selector ) ) {
this.selector = selector;
this.context = document;
selector = document.getElementsByTagName( selector )
// 두 번째 매개변수가 존재하지 않거나 jQuery 객체인 경우 이를 사용하거나 rootjQuery find를 호출하여 대상 노드 찾기(Sizzle 경로 사용)
} else if ( !context || context.jquery ) {
return (context || rootjQuery).find( selector ); / HANDLE: $(expr, context)
// (다음과 같습니다: $(context).find(expr)
} else {
//두 번째 매개변수가 요소 노드를 jQuery 객체로 변환하고 Sizzle 경로를 사용합니다.
return jQuery( context ). find( selector )
}
// 함수 매개변수를 직접 처리 domReady
} else if( jQuery .isFunction( selector ) ) {
return rootjQuery.ready( selector );
}
//jQuery 객체 매개변수를 처리하고 두 속성을 새 인스턴스에 할당하기만 하면 됩니다.
if (selector.selector !== 정의되지 않음) {
this.selector = selector.selector;
this .context = selector.context;
}
//makeArray가 두 번째를 허용하므로 여기서 일부 수정이 이루어졌습니다. 매개변수(병합 작업과 동일한 배열 또는 유사 배열일 수 있음)
return jQuery.isArray( selector ) ?
this.setArray( selector ) ://빠르게 전환하려면 내부적으로 push 메서드를 사용하세요. 일반 객체를 배열형 객체로
jQuery.makeArray( selector, this )
} , <🎜> 코드는 다음과 같습니다.

init: function( selector, context ) {
var match, elem, ret, doc
// 빈 문자열, null, 정의되지 않은 매개변수 처리
if ( !selector ) {
return this;
}
// 프로세스 노드 매개변수
if ( selector.nodeType ) {
this.context = this[0] = selector;
return this;
}
// 프로세스 본문 매개변수(신규)
if ( selector === "body" && !context ) {
this.context = document; this[0] = document.body;
this.selector = "body";
this.length = 1; return this;
}
// 문자열 매개변수 처리 7가지 상황:
//1객체 속성 패키지가 있는 단일 라벨---> jQuery.merge
//2객체 속성 패키지가 없는 단일 라벨---> attr jQuery.merge
//3복잡함 HTML 조각---> buildFragment jQuery.merge
//4ID 선택기, 발견된 요소의 ID와 다름---> getElementById Sizzle pushStack
//⑤ID 선택 장치와 동일 발견된 요소의 ID ---> getElementById 단순 속성 추가
//⑥ 태그 선택기 ---> getElementsByTagName jQuery.merge
///7 기타 CSS 표현식 ---> >if ( typeof selector === "string" ) {
match = QuickExpr.exec( selector )
if ( match && (match[1] || !context) ) {
if ( match [1] ) {
doc = (context ? context.ownerDocument || context : document);
ret = rsingleTag.exec( selector )
if ( ret ) {
if ( jQuery. isPlainObject( context ) ) {
selector = [ document.createElement( ret[1] ) ]
jQuery.fn.attr.call( selector, context, true ); selector = [ doc.createElement( ret[1] ) ];
}
} else {
ret = buildFragment( [ match[1] ], [ doc ] )
selector = (ret .cacheable ? ret.fragment.cloneNode(true) : ret.fragment).childNodes;
}
return jQuery.merge( this, selector )
} else {
elem = document.getElementById ( match[2] );
if ( elem ) {
if ( elem.id !== match[2] ) {
return rootjQuery.find( 선택기 )
}
this.length = 1;
this[0] = elem;
}
this.context = document;
this.selector = 선택자;
>} else if ( !context && /^w $/.test( selector ) ) {
this.selector = selector;
this.context = document
selector = document.getElementsByTagName( selector );
return jQuery.merge( this, selector );
} else if ( !context || context.jquery ) {
return (context || rootjQuery).find( selector )
} else {
return jQuery( context ).find( selector );
}
// 함수 매개변수를 직접 처리 domReady
} else if ( jQuery.isFunction( selector ) ) {
return rootjQuery. Ready( selector );
}
//jQuery 객체 매개변수 처리
if (selector.selector !== undefine) {
this.selector = selector.selector>this.context = selector.context;
}
//배열이든 유사한 배열(예: NodeList)이든 jQuery.makeArray를 사용하여 인스턴스에 새 요소를 추가합니다.
return jQuery.makeArray( selector, this );


makeArray 메소드와 merge 메소드가 첨부되어 있습니다.




코드 복사.


코드는 다음과 같습니다.

makeArray: function( array, results) {

var ret = results |if ( array ! = null ) { // 창, 문자열(및 함수)에도 '길이'가 있습니다. // 추가 유형의 함수 검사는 충돌을 방지하기 위한 것입니다 // Safari 2(참조: # 3039) if ( array.length == null || typeof array === "string" || jQuery.isFunction(array) || (typeof array !== "function" && array.setInterval) ) { push.call( ret, array );

} else {

jQuery.merge( ret, array )
}
}
return ret; >merge : function( first, second ) {
var i = first.length, j = 0
if ( typeof second.length === "number" ) {
for ( var l = second; .length j < l j ) {
첫 번째[ i ] = 두 번째[ j ]
}
} else {
while( 두 번째[j] !== 정의되지 않음) 🎜> first[ i ] = second[ j ];
}
}
first.length = i
return
},


2011 -01 -23에 출시된 버전 1.5는 1.42에서 초기화 방법이 거의 변경되지 않았습니다. 두 가지만 변경되었습니다.




코드 복사


코드는 다음과 같습니다.


//1.42

- ret = buildFragment( [ match[1] ], [ doc ] )
- selector = (ret.cacheable ? ret.fragment.cloneNode(true) : ret.fragment).childNodes;
//1.5

ret = jQuery.buildFragment( [ match[1] ], selector = (ret .cacheable ? jQuery .clone(ret.fragment) : ret.fragment).childNodes; //1.42 - return jQuery( context ).find( selector ) //1.5 return this.constructor( context ).find( selector );//새로운 인스턴스를 생성하는 것이 목적이 아닙니다

2011-05-02에 출시된 Jquery 1.6은 HTML 조각에 대한 보다 엄격한 판단을 제외하고는 크게 변경되지 않았습니다.

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

// HTML 문자열을 다루고 있습니까, 아니면 ID를 다루고 있습니까?
if ( selector.charAt(0) === "<" && selector. charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
// <>로 시작하고 끝나는 문자열은 HTML이라고 가정하고 정규식 검사를 건너뜁니다. 🎜>match = [ null, selector, null ];
} else {
match = QuickExpr.exec( selector )
}

일반적으로 jQuery의 구조는 다음과 같습니다. 이 악기는 매우 완벽하게 만들어졌으며 기본적으로 "아무것도 바꿀 수 없는" 지점에 도달했습니다. 그러나 효율적인 작동을 보장하려면 선택기에 대한 지식과 buildFragment 메소드 작동에 대한 이해도 필요합니다. 이 두 가지 방법은 너무 일반적으로 사용되지만 성능을 가장 많이 소모하기 때문입니다.