jQuery 소스코드 분석-01 전체 아키텍처 분석_jquery

1. 전체 아키텍처

1.1 자체 호출 익명 함수
jQuery 소스 코드를 열면 먼저 다음 코드 구조를 볼 수 있습니다.

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

(function( window, undefine) {
// jquery code
})(window); >

1. 자기 호출 익명 함수입니다. 무슨 물건? 첫 번째 괄호에서는 익명 함수를 만들고, 두 번째 괄호에서는 즉시 실행합니다.
2. 왜 이런 "자체 호출 익명 함수"를 만드는 걸까요?
익명 함수를 정의하면 "비공개" 네임스페이스가 생성됩니다. 이 네임스페이스의 변수와 메서드는 전역 네임스페이스를 파괴하지 않습니다. 이는 매우 유용하며 JS 프레임워크가 지원해야 하는 기능입니다. jQuery는 수천 개의 JavaScript 프로그램에서 사용됩니다. jQuery에서 생성된 변수는 이를 가져오는 프로그램에서 사용되는 변수와 충돌할 수 없습니다.
3. 익명 함수는 문법적으로 함수 리터럴이라고 합니다. JavaScript 구문에는 익명 함수를 묶는 대괄호가 필요합니다. 실제로 자체 호출 익명 함수를 작성하는 방법에는 두 가지가 있습니다.

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

(function() {
console.info( this ) ;
console.info( 인수 );
}( 창 ) )
(function() {
console.info( this );
console.info( 인수 );
})( window );

4. 왜 window를 전달해야 할까요?
창 변수를 전달하면 창이 전역 변수에서 지역 변수로 변경됩니다. jQuery 코드 블록에서 창에 액세스할 때 범위 체인을 최상위 범위로 롤백할 필요가 없습니다. 창에 더 빠르게 액세스할 수 있도록 하기 위한 것입니다. 더 중요한 것은 코드를 압축할 때 창을 매개변수로 전달하는 것이 최적화될 수 있다는 것입니다.
(함수 (a,b){} )(window); // 창은

에 최적화되어 있습니다. 5. 매개변수 목록에 정의되지 않은 항목을 추가하는 이유는 무엇입니까?
자체 호출 익명 함수의 범위에서 정의되지 않은 것이 실제로 정의되지 않았는지 확인하세요. 정의되지 않음을 덮어쓰고 새 값을 부여할 수 있기 때문입니다.
undefine = "이제 정의되었습니다.";
alert( undefine );

브라우저 테스트 결과:
브라우저
테스트 결과
결론
즉,
지금 정의됨
변경 가능
firefox
정의되지 않음
변경 불가능
chrome
이제 정의됨
변경 가능
opera
이제 정의됨
변경 가능

6. 소스코드 마지막에 세미콜론이 보이시나요?
세미콜론은 선택 사항이지만 생략하는 것은 좋은 프로그래밍 습관이 아닙니다. 더 나은 호환성과 견고성을 위해 각 코드 줄 뒤에 세미콜론을 추가하고 습관화하세요.
1.2 전체 아키텍처
자기 호출 익명 함수에 어떤 함수가 구현되어 있는지 코드 순서대로 살펴보겠습니다.

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

(function( window, undefine ) {
// jQuery 객체 생성
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery )
}
// 유틸리티
// 비동기 대기열 지연
// 브라우저 테스트 지원
// 데이터 캐시 데이터
// 큐
// 속성 작업 속성
// 이벤트 처리 이벤트
// 선택기 Sizzle
// DOM 순회
// DOM 작업
/ / CSS 작업
// 비동기 요청 Ajax
// 애니메이션 FX
// 좌표 및 크기
window.jQuery = window.$ = jQuery
})(window); >

위 댓글에 따르면 jQuery의 소스 코드 구조는 코드만큼 모호하거나 혼란스럽지 않고 상당히 명확하고 체계적입니다.

다음 장은 기본적으로 이 순서대로 전개됩니다.

1.3 다음 섹션 미리보기

jQuery 소스 코드를 살펴보면 곧 정규식으로 가득 차 있고 많은 JavaScript 개발자가 기본 지식을 무시한다는 것을 알게 될 것입니다. 이 장애물을 해결하기 위해 다음 장에서는 먼저 JavaScript 정규식에 대한 기본 지식을 검토한 후 jQuery의 정규식을 자세히 분석합니다.
정식으로 소스코드 분석을 시작하기 전에 준비해야 할 기본 지식이 있나요?
물론이죠. 예를 들어, JavaScript API의 클래스와 객체에 익숙하지 않다면 최소한 참조 매뉴얼을 준비해야 합니다.
정규 규칙을 제외하고 다른 지식 포인트는 분석 과정 전반에 걸쳐 설명되며 새로운 장은 계획되지 않습니다.