성격 숭배 jQuery 소스 코드 분석 노트
- WBOY원래의
- 2016-07-29 08:45:191017검색
jQuery의 목적은 Write Less, Do More입니다. JavaScript 개발 스타일에 있어서 YUI만큼 방해적이지도 않으며 Dojo 및 YUI만큼 거대하지도 않습니다. 이는 주로 DOM 요소의 작업(Query라는 이름에서 볼 수 있듯이)과 같은 JavaScript의 일상적인 개발 작업을 크게 단순화합니다. 모든 프런트엔드 개발자가 직면해야 하는 또 다른 주요 작업은 브라우저 호환성입니다. jQuery는 사악한 IE6부터 Firefox 및 Chrome과 같은 최신 브라우저에 이르기까지 모든 주요 브라우저의 대부분 버전과 호환됩니다. 핵심 코드의 일부를 제외하고 나머지 jQuery는 느슨한 함수이며 확장성이 뛰어납니다. http://plugins.jquery.com에는 수천 개의 jQuery 플러그인이 있습니다. 필요한 거의 모든 기능에는 해당 jQuery 플러그인이 있으며 둘 이상이 있습니다.
jQuery 코드의 선두는 라이선스 문구입니다. GPLv2 및 MIT 이중 계약을 채택합니다. 그리고 jQuery 선언 아래에는 Sizzle이라는 또 다른 프로젝트의 선언이 있습니다. 이것은 MIT, BSD 및 GPL로 출시된 jQuery 작성자의 또 다른 오픈 소스 프로젝트입니다. 이는 독립적인 선택기 구현(순수 JavaScript CSS 선택기 엔진)이며 독립적으로 사용할 수 있습니다. 압축된 버전은 3KB가 조금 넘으며 가장 효율적인 선택기 구현으로 알려져 있습니다. jQuery는 1.3부터 원래 선택기 구현 대신 Sizzle을 사용합니다.
JS 코드에는 ()와 {}가 많이 있습니다. % 명령을 사용하면 일치하는 대괄호를 빠르게 찾을 수 있기 때문에 여기서는 Vim을 사용하여 읽습니다.
전체 코드 구조 및 변수
jQuery 코드 전체는 익명 함수 호출입니다.
코드 복사 코드는 다음과 같습니다. :
(function (window, undefine) {
// ...
})(window)
이는 환경 오염을 방지하기 위한 것입니다. 전역 개체이며 관리 실행 컨텍스트도 편리합니다. 이 기술은 JS 코드에서 자주 볼 수 있으며 jQuery 코드에서도 일반적입니다. 예를 들어 jQuery를 다른 JS 라이브러리와 함께 사용하는 경우 $ 기호가 사용되었을 수 있습니다. $ 기호를 계속 사용하려면:
코드 복사 코드는 다음과 같습니다.
(function ($) {
// $ ("...")... 평소와 같이 $
})(jQuery)
를 사용하여 여기에 실제 jQuery 개체를 전달합니다.
실제 구현 부분으로 들어가 보겠습니다. 첫 번째는 jQuery 개체의 선언인 $입니다.
코드 복사 코드는 다음과 같습니다.
var jQuery = (function() {
var jQuery = function(selector, context) {
// 실제 초기화 함수
return new jQuery.fn.init(selector, context, rootjQuery);
},
// 많은 변수 선언
// fn은 주요 함수 구현 지점이자 jQuery의 시작 지점입니다. 플러그인.JS 프로토타입
jQuery.fn = jQuery.prototype = {
}
// 향후에는 객체에 멤버를 동적으로 추가할 수 있는 함수입니다. jQuery에 멤버를 추가하는 데 사용됩니다.
jQuery.extend = jQuery.fn.extend = function() {
}// ...
return jQuery; >})();
jQuery 객체는 핵심 객체입니다. $(...) 는 jQuery에서 직접 구현되는 소수의 유틸리티 함수를 제외하고 대부분의 함수를 가져옵니다. 확장 메소드를 사용하여 jQuery 객체에 추가됩니다.