이 글에서는 jQuery 소스코드 해석의 addClass() 메소드를 좀 더 자세히 분석합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.
addClass 함수를 jQuery 프로토타입 객체로 확장합니다. jQuery.fn은 jQuery.prototype입니다
jQuery.fn.extend({
/*
addClass라는 함수가 포함된 플러그인 메소드임을 알 수 있습니다.
*/
AddClass: 함수( 값 ) {
var 클래스, elem, cur, clazz, j, finalValue,
i = 0,
/*
이는 선택자에 의해 선택되어 클래스로 추가될 jQuery 객체를 나타내며, len은 jQuery 객체 배열의 길이입니다.
*/
len = this.length,
//하나의 피연산자가 부울 값이 아닌 경우 && 연산은 반드시 부울 값을 반환하지 않습니다. 이때 다음 규칙을 따릅니다.
//1. 첫 번째 피연산자가 부울 유형이 아닌 경우 두 번째 피연산자를 반환합니다.
//2. 두 번째 피연산자가 부울 유형이 아닌 경우 첫 번째 피연산자의 평가 결과가 true인 경우에만 객체가 반환됩니다.
//3. 두 피연산자가 모두 부울 유형이 아닌 경우 두 번째 피연산자를 반환합니다.
//4. 피연산자 중 하나가 null이면 null을 반환합니다.
//5. 피연산자 중 하나가 NaN이면 NaN을 반환합니다.
//6. 피연산자 중 하나가 정의되지 않은 경우 정의되지 않은 값을 반환합니다.
//사례 1: 규칙 4를 준수하는 값이 null인 경우 null을 반환합니다. 즉, 진행 값은 null입니다.
//사례 2: 규칙 6을 준수하는 값이 정의되지 않은 경우, 정의되지 않은 값이 반환됩니다. 즉, 진행 값은 정의되지 않습니다.
//사례 3: 값이 규칙 5를 준수하는 NaN이면 NaN을 반환합니다. 즉, 진행 값은 NaN입니다.
//사례 4: 값이 숫자 유형인 경우 false를 반환합니다.
//사례 5: 값이 부울 유형인 경우 false를 반환합니다.
//Case 7: 값이 Array, Object, Function 타입인 경우 규칙 2를 따르지만, typeof value === 'string'이 false이므로 객체를 반환하고 false를 반환합니다.
//사례 8: 값이 문자열 유형이고 규칙 2를 충족하면 값을 반환합니다.
//따라서 이 문장에서는 해당 값이 문자열 타입인지 여부만 판단하고, 문자열 값을 반환하여 진행하면 됩니다. 다른 유형은 결국 false를 반환하거나 암시적으로 false로 변환될 수 있는 유형입니다.
진행 = 값 유형 === "문자열" && 값;
//위에서는 문자열 타입인지 여부만 판단할 수 있으므로, 다음 문장에서는 해당 값이 Function 타입인지 판단하게 됩니다. 판단에는 jQuery의 전역 함수인 $.isFunction()이 사용됩니다.
if ( jQuery.isFunction( value ) ) {
//값이 함수 유형인 경우 여기로 이동하세요.
//체인 호출을 위해 jQuery 객체를 반환합니다.
//이것은 선택기에 의해 선택된 jQuery 객체입니다.
return this.each(function( j ) {
//Start iteration. 여기는 jQuery 객체가 아니고 현재 iteration의 DOM 객체이므로 jQuery(this)로 감싸서 jQuery 객체가 되므로 jQuery 메서드를 사용할 수 있습니다. j는 각 순회 인덱스를 나타냅니다. 클래스 이름을 설정하기 위해 값을 반환하는 값 함수를 전달합니다. value 함수는 매번 현재 DOM을 실행 개체로 호출하고 현재 DOM 인덱스 값과 클래스 이름을 전달합니다. value 함수에서 반환된 값은 jQuery(this).addClass(반환 값)에 의해 다시 호출됩니다. () 메소드가 다시 호출됩니다. 문자열이 반환되면 또 다른 if 분기가 실행됩니다. 반환된 함수가 여전히 함수인 경우 반환된 함수를 계속 호출합니다.
jQuery( this ).addClass( value.call( this, j, this.className ) );
});
}
//이전에 얻은 진행은 문자열입니다. 여기서는 비어 있지 않은 문자열이 암시적으로 true로 변환되는지 확인합니다. 빈 문자열은 암시적으로 false로 변환되므로 if 문 블록은 더 이상 실행되지 않습니다. 프로그램은 최종 반환 this로 점프하고 jQuery 개체가 반환되고 실행이 완료됩니다.
if ( 계속 ) {
//비어있지 않은 문자열을 진행하고 if 문 블록 실행을 시작합니다. 값이 "show bd1"이라고 가정합니다.
//rnotwhite는 정규식(/S /g)으로, 공백이 아닌 문자를 전역적으로 한 번 이상 일치시키는 것을 의미합니다.
//(value || "")는 "show bd1"을 반환하는데 이는 매우 간단합니다.
//"show bd1".match((/S /g)) || []는 ["show", "bd1"]을 반환합니다. 일치 항목이 무엇인지 모르신다면 확인해 보세요.
클래스 = ( 값 || "" ).match( rnotwhite ) ||
//이제 클래스는 클래스 이름을 추가하려는 배열인 ['show', 'bd1']입니다.
//아래에서 순회를 시작하고 각 DOM 객체에 대한 클래스를 추가합니다.
for ( ; i
//이것은 jQuery 객체이고, elem은 현재 DOM 객체입니다.
elem = this[i];
/*
=== 연산자는 && 연산자보다 우선순위가 더 높습니다. 먼저 DOM 노드 유형이 요소 노드인지 여부를 결정합니다.
rclass는 정규 표현식입니다/[trnf]/g;
괄호 안의 삼항 연산자는 현재 DOM 노드에 이미 클래스가 있는지 여부를 나타냅니다. 그렇다면 클래스에 존재할 수 있는 탭 문자, 줄 바꿈 문자, 캐리지 리턴 문자 등이 공백 " "이 포함된 문자열로 대체됩니다. , 현재 클래스 앞뒤에 공백을 추가합니다. 현재 DOM 노드에 클래스가 없으면 공백 " "이 있는 문자열도 제공됩니다. 드디어
가 됩니다
cur = elem.nodeType === 1 && "show bd1", 이것은 매우 친숙합니다. 예, 처음 6개 규칙에 따라 평가됩니다.
elem의 노드 유형이 1이고 cur = true && " ", 마지막으로 cur = "show bd1"이라고 가정합니다.
elem의 노드 유형이 1이 아닌 경우 cur = false && " "이고 마지막으로 cur = false입니다.
*/
Cur = elem.nodeType === 1 && ( elem.className ?
( " " elem.className " " ).replace( rclass, " " ):" ");
//이제 cur = "show bd1", 실행을 위해 if 문 블록을 입력합니다.
만약 (현재) {
j = 0;
/*
수업은 ["show bd1"]
입니다.
현재 DOM 요소가 이미 가지고 있는 클래스에 추가할 클래스가 이미 존재하는지 확인하는 루프입니다.
그렇지 않은 경우 이 클래스를 추가하세요.
*/
동안 ((Clazz = 클래스 [J]) {
If ( cur.indexOf( " " clazz " " ) < 0 ) {
~ > 🎜>
|
}
/*
마지막으로 $.trim()을 사용하여 "show bd1" 클래스의 양쪽 끝에 있는 공백 문자를 제거합니다.
현재 DOM 요소의 클래스가 스플라이싱된 클래스와 동일한지 확인합니다. 동일한 클래스의 불필요한 렌더링 중복을 피하십시오.
*/
finalValue = jQuery.trim( cur );
If ( elem.className !== finalValue ) {
에게
}
}
}
}
//향후 체인 호출을 위해 이 jQuery 객체를 반환합니다.
이것을 돌려주세요;
}
});
이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
