jQuery 4부 읽기(우아한 반복)_jquery

jQuery의 동작은 흔히
1, 요소 컬렉션(선택기) 획득
2, 요소 컬렉션 조작
의 두 단계로 나누어지는데, 두 번째 단계에서 요소 컬렉션을 조작하는 주요 방법은 jQuery입니다. 각. 소스 코드를 살펴보면 jQuery.each와 this.each가 각각 27번, 31번 호출된 것을 발견했습니다. 이것은 그것이 얼마나 중요한지 보여줍니다.
이 기사에서는 jQuery.each 및 this.each 메소드를 분석합니다. jQuery.extend를 사용하여 jQuery 라이브러리를 확장하는 방법을 살펴보세요. 마지막으로 각 메소드를 zChain.js에 추가하겠습니다.
소스코드 일부는 다음과 같습니다

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

jQuery.fn = jQuery.prototype = {
...
// 일치하는 집합의 모든 요소에 대해 콜백을 실행합니다.
// (인수 배열로 인수를 시드할 수 있습니다. , 그러나 이는
// 내부적으로만 사용됩니다.)
each: function( callback, args ) {
return jQuery.each( this, callback, args )
},
. ..
}
jQuery.extend({
...
// args는 내부 사용 전용입니다.
each: function( object, callback, args ) {
var name , i = 0,
length = object.length,
isObj = length === 정의되지 않음 || jQuery.isFunction( object )
if ( args ) {
if ( isObj ) {
for ( 객체의 이름 ) {
if ( callback.apply( object[ name ], args ) === false ) {
break
}
}
} else {
for ( ; i if ( callback.apply( object[ i ], args ) === false ) {
break;
}
}
}
// 각 항목의 가장 일반적으로 사용되는 특별하고 빠른 사례
} else {
if ( isObj ) {
for ( name in object ) {
if ( 콜백 .call( object[ 이름 ], name , object[ 이름 ] ) === false ) {
break
}
}
} else {
for ( ; i < length; ; ) {
if ( 콜백 .call( object[ i ], i, object[ i ] ) === false ) {
break
}
}
}
}
return object;
},
...
})

위에서 볼 수 있듯이
1, jQuery(). 각각은 jQuery.prototype(jQuery.fn)에 직접 연결되므로 모든 jQuery 객체에는 Each 메서드가 포함되어 있습니다.
2. jQuery.each는 jQuery.extend({})를 통해 확장됩니다. 앞서 언급한 것처럼 이렇게 확장된 메소드는 jQuery 클래스의 정적 메소드인 jQuery 함수에 걸리게 됩니다.
3. jQuery().each 메서드에는 return jQuery.each( this, callback, args )라는 문장이 하나만 있습니다. 즉, jQuery 객체의 각 메소드 구현은 실제로 jQuery의 정적 jQuery.each를 호출하는 것입니다. 따라서 jQuery.each가 핵심입니다.
다음은 object, callback, args의 세 가지 매개변수를 갖는 jQuery.each를 자세히 분석한 것입니다.
1, 객체는 배열(Array), 객체(Object) 또는 함수 유형(Functoin)일 수 있습니다.
2, 콜백은 콜백 함수이고, 유형은 함수입니다.
3, args는 다음과 같습니다. jQuery 라이브러리 자체를 사용하는 경우 사용자는 이 매개변수를 사용하지 않습니다. 여기서는 이 매개변수를 설명하지 않습니다.

함수의 첫 번째 문장은 필요한 변수를 정의합니다

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

var 이름, i = 0,
length = object.length,
isObj = length === 정의되지 않음 || jQuery.isFunction( object )

length=object.length는 길이가 정의되지 않은 세 가지 상황이 있습니다.
1. 객체가 배열 유형(Array)인 경우
2. 객체는 함수 유형(Functoin)입니다. 함수가 매개변수를 정의하지 않는 경우 길이는 0입니다.
3, 길이 속성이 있는 객체 의사 배열입니다. 인수, HTMLCollection, NodeList 등).

isObj 변수는 객체 유형인지 확인하는 데 사용됩니다.
1. 변수 길이가 정의되지 않은 경우, 즉 전달된 객체가 없습니다. 길이 속성.
2. 매개변수 개체는 함수 유형입니다.

여기서는 개체가 jQuery 개체라는 점을 강조합니다. 즉, $(xx).each에서 발생하면 $.each로 전달됩니다. 예: jQuery.each(this, callback, args)를 반환합니다. 여기서 첫 번째 매개변수는 jQuery 객체이고, 각 jQuery 객체에는 길이 속성이 있습니다.

각
1에는 다음 두 가지 분기가 있습니다. isObj가 true인 경우 for in 문을 사용하여 객체를 순회합니다. 각 반복 객체가 키-값 쌍의 형태로 표시됩니다. 콜백에서 이것은 object[name] 값이고, 콜백의 첫 번째 매개변수는 키 이름이고, 두 번째 매개변수는 object[name] 값입니다.
2. isObj가 false인 경우 for 루프를 사용하여 배열을 탐색합니다(배열과 유사). 콜백에서 이것은 배열의 단일 요소 값입니다. 콜백의 첫 번째 매개변수는 배열의 인덱스 i이고 두 번째 매개변수는 배열의 단일 요소 값입니다.
콜백 호출 후 반환 값이 false인 경우 반복을 중지하고 루프에서 빠져나옵니다. 여기서는 false와 같은지 여부를 확인하기 위해 엄격한 "==="를 사용합니다. 그런데 함수에 명시적인 반환값이 없으면 기본적으로 정의되지 않은 반환값이 반환됩니다.

요약하자면:
1. $(xx).each는 각각 정적 jQuery.each를 호출하는 jQuery 객체의 메서드입니다. jQuery 객체를 반복하는 데에만 사용됩니다. jQuery 객체는 의사 배열(길이 속성이 있고 인덱스로 액세스됨)로 간주될 수 있습니다.
2. 각각의 $.each는 객체, 배열, 의사 배열 및 함수를 반복할 수 있는 함수 jQuery(예: jQuery.each)의 정적 메서드입니다.
zChain-04.rar