1. jQuery에서는 Each 메소드를 사용하는 사람이 많을 것으로 예상됩니다.
그럼 jQuery가 어떤 작업을 수행했는지 살펴보겠습니다.
jquery에서 각 소스 코드 찾기:
각: 함수( object, callback, args ) {
var name, i = 0,
length = object.length,
isObj = length === undefine || .isFunction( object );
if ( args ) {
if ( isObj ) {
for ( name in object ) {
if ( callback.apply( object[ name ], args ) === false ) {
break;
}
}
} else {
for ( ; i < length; ) {
if ( callback.apply( object[ i ], args ) = == false ) {
break;
}
}
}
// 각 <의 가장 일반적으로 사용되는 특별하고 빠른 사례입니다. 🎜>} else {
if ( isObj ) {
for ( name in object ) {
if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
break;
}
}
} else {
for ( ; i < length; ) {
if ( callback.call( object[ i ], i, object[ i ] ) === false ) {
break;
}
}
}
}
return object;
이 코드는 비교적 간단해서 문제가 없을 것입니다.
이것을 테스트하기 위해 다음 js를 작성했습니다.
code
코드는 다음과 같습니다. $.each($(".demo"),function(){ console.log("show ");
});
그런 다음 HTML을 추가하세요.
코드 복사
그런 다음 jQuery 소스 코드를 사용하여 디버깅했습니다. 정확한 결과를 얻을 수 있었습니다. 하지만 안타깝습니다.
보시다시피 여기 객체는 제가 원하는 3개의 html 객체가 아니라 js의 8가지 내장 데이터 유형입니다.
뒤에 jquery 소스 코드에 코드 조각을 추가했습니다.
코드 복사
코드는 다음과 같습니다. console.log(Object.prototype.toString(object)); console.log(length)
이후의 입력은 다음과 같습니다. 다음은 다음과 같습니다.
즉, 문서가 로드되면 jQuery는 DOM 개체가 사용되지 않더라도 각 개체를 사용하여 dom 개체를 순회합니다.
코드 복사
지정된 객체를 순회한 후에도 버블링은 계속해서 상위 요소를 순회합니다.
2. jQuery 소스코드에 따라 콜백 함수 매개변수를 사용합니다
코드를 복사합니다
코드는 다음과 같습니다. $.each($(".demo"),function(a,b){ console.log(a "" $(a).attr("class")) ;
} )
소스 코드에서 볼 수 있습니다:
코드 복사
마지막으로 현재 개체가 콜백에 전달됩니다. call 메소드를 통해 함수를 호출한 다음 위와 같이 진행할 수 있습니다. 현재 객체의 속성을 사용하세요. 물론 이것을 이용해 직접 호출할 수도 있습니다.
더 복잡한 것에 대해 이야기하는 경우, 예를 들어 여기서는 $(".demo")를 $.each()에 객체로 전달합니다.
가끔 jQuery 또는 html 객체가 전달되지 않는 경우도 있습니다. . 그러나 객체 또는 배열입니다.
그리고 배열에는 다른 객체나 메소드도 많이 있습니다.
이렇게 하면 더 많은 효과를 얻을 수 있습니다.
3. call 또는 Apply를 사용하여 콜백 모드를 구현합니다.
위 코드에서 볼 수 있듯이
코드 복사
callback.apply([obj],args )
과 같은 코드의 경우 콜백 함수를 전달하여 직접 호출하기만 하면 되며 이는 코드 재사용을 향상시키는 데 매우 유용합니다.
그러나 코드 가독성 저하, 결합도 증가 등 몇 가지 단점도 있습니다.
가끔 떠오르는 게 있으면 녹음해서 잊어버리지 않도록 하세요!