집 > 기사 > 웹 프론트엔드 > jquery의 전반적인 아키텍처 분석 및 구현에 대한 자세한 설명 example_jquery

jquery의 전반적인 아키텍처 분석 및 구현에 대한 자세한 설명 example_jquery

WBOY원래의: 2016-05-16 16:31:571229검색

전체적인 jQuery 프레임워크는 매우 복잡하고 이해하기 쉽지 않습니다. 저는 지난 며칠 동안 이 무겁고 강력한 프레임워크를 연구해 왔습니다. jQuery의 전체 아키텍처는 항목 모듈, 기본 모듈 및 기능 모듈로 나눌 수 있습니다. 여기서는 분석을 위한 예로 jquery-1.7.1을 사용합니다.

jquery의 전체 아키텍처

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

16(함수(창, 정의되지 않음) {

                    // jQuery 객체 생성

22 var jQuery = (함수() {

25 var jQuery = 함수(선택기, 컨텍스트) {

27                    새로운 jQuery.fn.init( selector, context, rootjQuery) 반환;

28 },

// 지역 변수 선언 묶음

97 jQuery.fn = jQuery.prototype = {

98          생성자: jQuery,

99 초기화: 함수(선택기, 컨텍스트, rootjQuery) { ... },

// 다양한 프로토타입 속성과 메서드 

319 };

322          jQuery.fn.init.prototype = jQuery.fn;

324        jQuery.extend = jQuery.fn.extend = function() { ... };

388 jQuery.extend({

// 다양한 정적 속성과 메서드

892 });

955        jQuery를 반환합니다.

957 })();

//다른 모듈의 코드는 생략...

9246  window.jQuery = window.$ = jQuery;

9266 })( 창 );

위 코드를 분석해 보면 jquery는 익명 함수 자체 실행 방식을 채택하고 있어 네임스페이스 및 변수 오염 문제를 효과적으로 방지할 수 있다는 장점이 있습니다. 위 코드를 축약하면 다음과 같습니다.

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

(함수(창, 정의되지 않음) {

var jQuery = function() {}

// ...

​ window.jQuery = window.$ = jQuery;

})(창);

매개변수 창

익명 함수는 두 개의 매개변수를 전달합니다. 하나는 창이고 다른 하나는 정의되지 않았습니다. 우리는 js의 변수에 범위 체인이 있다는 것을 알고 있습니다. 전달된 두 변수는 익명 함수의 로컬 변수가 되며 더 빠르게 액세스됩니다. window 객체를 전달하면 window 객체를 지역 변수로 사용할 수 있으며, 그러면 함수의 매개변수도 지역 변수가 됩니다. jquery에서 window 객체에 액세스할 때 범위 체인을 맨 위로 반환할 필요가 없습니다. -수준 범위이므로 창 개체에 더 빠르게 액세스할 수 있습니다.

정의되지 않은 매개변수

js가 변수를 검색할 때 js 엔진은 먼저 함수 자체의 범위에서 변수를 검색합니다. 변수가 없으면 계속 위쪽으로 검색하여 변수를 반환합니다. . 찾을 수 없으면 정의되지 않은 값을 반환합니다. undefound는 window 객체의 속성입니다. 값을 할당하지 않고 undefound 매개변수를 전달하면 undefed를 검색할 때 범위 체인이 단축될 수 있습니다. 자체 호출 익명 함수의 범위 내에서 정의되지 않음이 실제로 정의되지 않았는지 확인하세요. 정의되지 않음을 덮어쓰고 새 값을 부여할 수 있기 때문입니다.

jquery.fn이 무엇인가요?

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

jQuery.fn = jQuery.prototype = {

               생성자: jQuery,

                init: function(selector, context, rootjQuery) { ... },

// 다양한 프로토타입 속성과 메서드 

        };

위 코드를 분석해 보면 jQuery.fn이 jQuery.prototype이라는 것을 알 수 있습니다. 이렇게 작성하면 길이가 더 짧다는 장점이 있습니다. 나중에 우리는 jquery가 단순성을 위해 jquery 대신 $ 기호를 사용했다는 것을 확인했습니다. 따라서 jquery 프레임워크를 사용할 때 $(),

를 자주 사용합니다.

생성자 jQuery()

이미지 설명

jQuery 개체는 새 jQuery를 통해 생성되지 않고 새 jQuery.fn.init를 통해 생성됩니다.

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

var jQuery = 함수(선택기, 컨텍스트) {

새로운 jQuery.fn.init( selector, context, rootjQuery )를 반환합니다.

}

여기에 변수 jQuery가 정의되어 있으며 해당 값은 jQuery 생성자이며, 이 생성자는 반환되어 955행(상위 코드)의 jQuery 변수에 할당됩니다.

jQuery.fn.init

jQuery.fn(위 97행)은 생성자 함수 jQuery()의 프로토타입 객체이고, jQuery.fn.init()는 생성자라고도 할 수 있는 jQuery 프로토타입 메서드입니다. 매개변수 선택기 및 컨텍스트의 유형을 구문 분석하고 해당 검색을 수행하는 역할을 담당합니다.

매개변수 컨텍스트: 전달할 수 없거나 jQuery 객체, DOM 요소 또는 일반 js 객체 중 하나로 전달할 수 있습니다
매개변수 rootjQuery: document.getElementById() 실패와 같은 상황에 사용되는 문서 객체를 포함하는 jQuery 객체입니다.

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

jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype

jQuery(선택기 [,컨텍스트])

기본적으로 일치하는 요소 검색은 루트 요소 문서 개체에서 시작됩니다. 즉, 검색 범위는 전체 문서 트리이지만 두 번째 매개변수 컨텍스트를 전달하여 검색 범위를 제한할 수도 있습니다. 예:

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

$('div.foo').click(함수 () {

                 $('span',this).addClass('bar');//검색 범위, 즉 위 컨텍스트를 제한

});

jQuery.extend() 및 jQuery.fn.extend()

jQuery.extend(object) 및 jQuery.fn.extend(object) 메소드는 두 개 이상의 객체를 첫 번째 객체로 병합하는 데 사용됩니다. 해당 소스코드는 다음과 같습니다(일부):

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

jQuery.extend = jQuery.fn.extend = function() {

var options, name, src, copy, copyIsArray, clone,//정의된 지역 변수 세트

대상 = 인수[0] || {},

나는 = 1,

길이 = 인수.길이,

깊은 = 거짓;

jQuery.extend(object); jQuery 클래스에 클래스 메소드를 추가합니다. 이는 정적 메소드를 추가하는 것으로 이해할 수 있습니다. 예:

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

$.extend({ 

​추가:함수(a,b){returna b;} 

}) 

jQuery에 add라는 "정적 메서드"를 추가하면 jQuery가 도입된 이 메서드를 사용할 수 있습니다.

$.add(3,4) //7을 반환
jQuery.fn.extend(object), 다음과 같이 공식 웹사이트에서 코드 데모를 확인하세요.

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

Foo
바

<스크립트>
jQuery.fn.extend({
           확인: function() {
               return this.each(function() {
This.checked = true;
            });
},
선택 취소: function() {
               return this.each(function() {
This.checked = false;
            });
}
});
// 새로 생성된 .check() 메서드를 사용합니다
$( "input[type='checkbox']" ).check();

CSS 선택기 엔진 Sizzle

jQuery가 DOM을 운영하기 위해 탄생했다고 할 수 있습니다. jQuery가 이렇게 강력한 이유는 CSS 선택기 엔진 Sizzle 때문입니다.

선택기："div > p div.aaron 입력[type="checkbox"]"

파싱 규칙:
1 오른쪽에서 왼쪽으로 따라가세요
2 [type="checkbox"]
와 같은 마지막 토큰을 꺼냅니다. ~ 일치 항목: 배열[3]
유형: "ATTR"
~ 확인란 "]"
| 3 필터 유형 유형이 > ~ 비어 있는 경우, 4개의 관계 선택기 중 하나, 건너뛰고 필터링 계속
4 ID, CLASS, TAG 중 하나와 일치할 때까지, 이 방법으로 브라우저 인터페이스를 통해 얻을 수 있기 때문입니다
5 이때 시드 컬렉션에는 가치가 있으므로 브러시 선택 조건이 줄어듭니다
6. 일치하는 시드 컬렉션이 여러 개 있는 경우 추가 필터링이 필요합니다. 선택기 선택기: "div > p div.aaron [type="checkbox"]"
7 좋습니다. 컴파일 기능의 다음 단계로 이동합니다

지연 객체

웹사이트를 개발하는 과정에서 우리는 종종 시간이 오래 걸리는 특정 JavaScript 작업을 접하게 됩니다. 그 중에는 비동기 작업(예: ajax 서버 데이터 읽기)과 동기 작업(예: 대규모 배열 순회)이 모두 있으며 결과를 즉시 사용할 수는 없습니다.

일반적인 접근 방식은 콜백 함수를 지정하는 것입니다. 즉, 실행이 완료된 후 어떤 함수를 호출해야 하는지 미리 지정하세요.

그러나 jQuery는 콜백 함수에 있어서 매우 취약합니다. 이를 바꾸기 위해 jQuery 개발팀은 지연 객체를 설계했습니다.

간단히 말하면 지연 객체는 jQuery의 콜백 함수 솔루션입니다. 영어로 defer는 "지연"을 의미하므로 deferred 객체의 의미는 미래의 특정 시점까지 실행을 "지연"하는 것입니다.

jQuery의 ajax 작업을 작성하는 전통적인 방법을 검토합니다.

코드 복사 코드는 다음과 같습니다. $.ajax({

url: "test.html",

성공: function(){
Alert("하하, 성공했어요!");
　　},
오류:함수(){
warning("뭔가 잘못되었습니다!");
　　}
});

위 코드에서 $.ajax()는 객체 매개변수를 허용합니다. 이 객체에는 두 가지 메서드가 포함되어 있습니다. 성공 메서드는 작업이 성공한 후 콜백 함수를 지정하고 오류 메서드는 작업이 실패한 후 콜백 함수를 지정합니다.

$.ajax() 작업이 완료된 후 jQuery 1.5.0 미만 버전을 사용하는 경우 XHR 객체가 반환되고 버전이 1.5.0보다 높으면 체인 작업을 수행할 수 없습니다. , 반환된 Deferred 객체를 연결할 수 있습니다.

이제 새로운 글쓰기 방식은 다음과 같습니다.

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

$.ajax("test.html")

​.done(function(){ Alert("하하, 성공했습니다!"); })

​.fail(function(){ 경고("오류!"); });

여러 작업에 대한 콜백 함수 지정

지연 객체의 또 다른 큰 이점은 여러 이벤트에 대한 콜백 함수를 지정할 수 있다는 것인데, 이는 기존 작성에서는 불가능합니다.

새로운 메소드 $.when()을 사용하는 다음 코드를 살펴보세요.

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

$.when($.ajax("test1.html"), $.ajax("test2.html"))

　.done(function(){ Alert("하하, 성공했습니다!"); })

.fail(function(){ 경고("오류!"); });

이 코드의 의미는 먼저 $.ajax("test1.html") 및 $.ajax("test2.html") 두 작업을 수행하는 것입니다. 둘 다 성공하면 done() 함수에 지정된 콜백을 실행합니다. ; 둘 중 하나가 실패하거나 둘 다 실패하면, failure()에 의해 지정된 콜백 함수가 실행됩니다.

jQuery.Deferred(func) 구현 원리

내부적으로 세 가지 콜백 함수 목록이 유지됩니다: 성공 콜백 함수 목록, 실패 콜백 함수 목록, 메시지 콜백 함수 목록. 다른 메서드는 이 세 가지 목록을 중심으로 작동하고 감지합니다.

jQuery.Deferred( func )의 소스 코드 구조:

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

jQuery.extend({

지연됨: function( func ) {
// 성공 콜백 함수 목록
          var doneList = jQuery.Callbacks( "한 번 메모리" ),
// 실패 콜백 함수 목록
              failureList = jQuery.Callbacks( "한 번 메모리" ),
// 메시지 콜백 함수 목록
           ProgressList = jQuery.Callbacks( "memory" ),
// 초기상태
             상태 = "보류 중",
                      // 비동기 대기열의 읽기 전용 복사본
               약속 = {
// 완료, 실패, 진행
                                // 상태, isResolved, isRejected
                             // 그럼 언제나
                         // 파이프
// 약속하다             },
                                         // 비동기 대기열               연기됨 = promise.promise({}),
             키;
// 성공, 실패, 메시지 콜백 목록을 트리거하는 메서드 추가
for(목록의 키) {
              deferred[키] = 목록[키].fire;
             deferred[ key "With" ] = 목록[ key ].fireWith;
}
                // 상태 설정을 위한 콜백 함수 추가
deferred.done( function() {
             상태 = "해결됨";
}, 실패목록.비활성화, 진행목록.잠금 )
         .fail( function() {
             상태 = "거부됨";
            }, doneList.disable, ProgressList.lock );
                 // 함수 매개변수 func가 전달되면 실행됩니다.
           if ( func ) {
                func.call(연기됨, 연기됨);
}

// 지연된 비동기 대기열 반환

반품이 연기되었습니다.

},
}

jQuery.when( 연기 )

일반적으로 비동기 이벤트가 포함된 비동기 대기열을 기반으로 하나 이상의 개체 상태를 기반으로 콜백 함수를 실행하는 기능을 제공합니다.

jQuery.when( deferreds ) 사용

여러 비동기 대기열 객체가 전달되면 jQuery.when() 메서드는 기본 비동기 대기열 객체의 새로운 읽기 전용 복사본을 반환합니다. 읽기 전용 복사본은 전달된 비동기 대기열의 최종 상태를 추적합니다.

모든 비동기 대기열이 성공하면 "기본" 비동기 대기열의 성공 콜백 함수가 호출됩니다.

비동기 대기열 중 하나가 실패하면 기본 비동기 대기열의 실패 콜백 함수가 호출됩니다.

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

/*

'/when.do?method=when1' 요청은 {"when":1}
을 반환합니다.
'/when.do?method=when2' 요청은 {"when":2}
을 반환합니다.
'/when.do?method=when3' 요청은 {"when":3}
을 반환합니다.
*/

var whenDone = function(){ console.log( 'done', 인수 ) },

WhenFail = function(){ console.log( 'fail', 인수 );

$.언제(

$.ajax( '/when.do?method=when1', { dataType: "json" } ),

$.ajax( '/when.do?method=when2', { dataType: "json" } ),

$.ajax( '/when.do?method=when3', { dataType: "json" } )

).done( whenDone ).fail( whenFail );

이미지 설명

비동기 대기열 지연

비동기 작업과 콜백 함수 분리

Ajax 모듈, 큐 모듈, 준비 이벤트에 대한 기본 기능을 제공합니다.

프로토타입 속성 및 방법

프로토타입 속성 및 메서드 소스 코드:

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

jQuery.fn = jQuery.prototype = {

생성자: jQuery,

초기화: 함수(선택기, 컨텍스트, rootjQuery) {}

선택기: "",

제이쿼리: "1.7.1",

길이: 0,

크기: function() {},

toArray: 함수() {},

get: 함수( num ) {},

pushStack: 함수(요소, 이름, 선택기) {},

각각 270개: 함수( 콜백, 인수 ) {},

준비: 함수( fn ) {}, //

eq: 함수( i ) {},

첫 번째: function() {},

마지막: function() {},

슬라이스: 함수() {},

맵: 함수( 콜백 ) {},

끝: 함수() {},

푸시: 푸시,

정렬: [].sort,

스플라이스: [].splice

};

selector 속성은 jQuery가 DOM 요소를 찾아 필터링할 때 선택기 표현식을 기록하는 데 사용됩니다.
.length 속성은 현재 jquery 객체의 요소 수를 나타냅니다.
.size() 메소드는 현재 jquery 객체의 요소 수를 반환합니다. 기능적으로는 속성 길이와 동일하지만 함수 호출 오버헤드가 없으므로 길이를 먼저 사용해야 합니다.

.size() 소스코드는 다음과 같습니다.

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

크기():함수(){

이 길이를 반환하세요;

}

.toArray() 메소드는 현재 jQuery 객체를 실제 배열로 변환합니다. 변환된 배열에는 모든 요소가 포함됩니다.

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

toArray: 함수() {

          return Slice.call( this );

},

Method.get(index)는 현재 jQuery 객체의 지정된 위치에 있는 요소를 반환하거나 모든 요소를 포함하는 배열을 반환합니다. 출처
코드는 다음과 같습니다.

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

가져오기: 함수(숫자) {
반환 번호 == null ?

// '깨끗한' 배열 반환
This.toArray():

// 객체만 반환
( num },

매개변수가 전달되지 않은 경우 .toArray()를 호출하면 잠긴 요소가 포함된 배열이 반환됩니다. 매개변수 인덱스가 지정되면 인덱스는 0부터 계산되기 시작하고 음수를 지원합니다.

먼저 num이 0보다 작은지 판단합니다. 0보다 작은 경우 길이 num을 사용하여 첨자를 다시 계산한 다음 배열 액세스 연산자([])를 사용하여 요소를 가져옵니다. 팁: 0보다 크거나 같으면 지정된 위치의 요소를 직접 반환합니다.

eg() 및 get() 사용에 대한 자세한 설명: 일반적인 jquery 메서드 및 사용 예 요약

.each() 메소드는 현재 jQuery 객체를 반복하고 각 요소에 대해 콜백 함수를 실행하는 데 사용됩니다. Method.each()는 단순히 정적 메서드인 jQuery.each()를 호출하여 내부적으로 구현됩니다.

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

각각: 함수( 콜백, 인수 ) {

          jQuery.each( this, callback, args )를 반환합니다.

},

콜백 함수는 현재 요소가 컨텍스트인 컨텍스트, 즉 키워드 this가 항상 현재 요소를 가리키는 컨텍스트에서 트리거되며, 콜백 함수에서 false를 반환하면 순회가 종료될 수 있습니다.

.map() 메서드는 현재 jQuery 객체를 반복하고, 각 요소에서 콜백 함수를 실행하고, 콜백 함수의 반환 값을 새 jQuery 객체에 넣습니다. 이 메서드는 DOM 요소 컬렉션의 값을 가져오거나 설정하는 데 자주 사용됩니다.

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

지도: 함수( 콜백 ) {

          return this.pushStack( jQuery.map(this, function( elem, i ) {

                return callback.call(elem, i, elem);

         }));

},

프로토타입 메소드 .pushStack()은 새로운 빈 jQuery 객체를 생성한 다음 DOM 요소 컬렉션을 이 jQuery 객체에 넣고 현재 jQuery 객체에 대한 참조를 유지합니다.

프로토타입 method.pushStack()은 다음 메소드를 지원하는 핵심 메소드 중 하나입니다.

jQuery 객체 탐색: .eq(), .first(), .last(), .slice(), .map().

DOM 검색 및 필터링: .find(), .not(), .filter(), .closest(), .add(), .andSelf().

DOM 순회: .parent(), .parents(), .parentsUntil(), .next(), .prev(), .nextAll(), .prevAll(), .nextUnit(), .prevUnit() , .siblings(), .children(), .contents().

DOM 삽입: jQuery.before(), jQuery.after(), jQuery.replaceWith(), .append(), .prepent(), .before(), .after(), .replaceWith().
3개의 매개변수를 허용하는 .push(elems, name, selector) 메소드 정의:

매개변수 요소: 새 jQuery 객체에 포함될 요소 배열(또는 유사 배열 객체)입니다.

매개변수 이름: 요소 배열 요소를 생성하는 jQuery 메서드의 이름입니다.

매개변수 선택기: 프로토타입 attribute.selector를 수정하는 데 사용되는 jQuery 메소드에 전달되는 매개변수입니다.
.end() 메소드는 현재 체인에서 가장 최근의 필터링 작업을 종료하고 일치하는 요소를 이전 상태로 복원합니다.

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

끝: 함수() {

         return this.prevObject || this.constructor(null);

},

이전 jQuery 객체를 반환합니다. prevObect 속성이 없으면 빈 jQuery 객체가 생성되어 반환됩니다. .pushStack() 메서드는 스택에 푸시하는 데 사용되며, .end() 메서드는 스택에서 튀어나오는 데 사용됩니다

정적 속성 및 메서드

해당 소스코드는 다음과 같습니다.

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

388 jQuery.extend({

 389     noCon conflict: 함수( deep ) {},

 402     isReady: false,

 406     준비대기: 1,

 409     홀드 준비: 함수( 홀드 ) {},

 418     준비: 함수( 대기) {},

 444     바인딩준비: 함수() {},

 492     isFunction: 함수( obj ) {},

 496     isArray: Array.isArray || 함수( obj ) {},

 501     isWindow: 함수( obj ) {},

 505     isNumeric: 함수( obj ) {},

 509     유형: 함수( obj ) {},

 515     isPlainObject: 함수( obj ) {},

 544     isEmptyObject: 함수( obj ) {},

 551     오류: 함수( msg ) {},

 555     파싱JSON: 함수( 데이터 ) {},

 581     parsXML: 함수( 데이터 ) {},

 601     noop: function() {},

 606     globalEval: 함수( 데이터 ) {},

 619     camelCase: 함수( 문자열 ) {},

 623     nodeName: 함수( elem, 이름 ) {},

 628     각: 함수( 객체, 콜백, 인수 ) {},

 669     다듬기: 다듬기 ? 함수( 텍스트 ) {} : 함수( 텍스트 ) {},

 684     makeArray: 함수( 배열, 결과 ) {},

 702     inArray: 함수( elem, array, i ) {},

 724     병합: 함수( 첫 번째, 두 번째 ) {},

 744     grep: 함수( elems, 콜백, inv ) {},

 761     맵: 함수( elems, 콜백, arg ) {},

 794     GUID: 1,

 798     프록시: 함수( fn, context ) {},

 825     액세스: 함수( elems, key, value, exec, fn, pass ) {},

 852     현재: function() {},

 858     uaMatch: 함수( ua ) {},

 870     하위: function() {},

 891     브라우저: {}

 892 });

未完待续、、、今天就先到这里了，下次补齐。别急哈小伙伴们

성명：

이전 기사：node.js 개발에서 Node Supervisor를 사용하여 파일 수정 사항을 모니터링하고 application_node.js를 자동으로 다시 시작합니다.다음 기사：node.js 개발에서 Node Supervisor를 사용하여 파일 수정 사항을 모니터링하고 application_node.js를 자동으로 다시 시작합니다.

jquery의 전반적인 아키텍처 분석 및 구현에 대한 자세한 설명 example_jquery

관련 기사