jQuery 내부 구조 설계를 간단히 분석하다.

jQuery는 여러분에게 낯설지 않기 때문에 그것이 무엇인지, 그리고 그 역할에 대해 저는 더 이상 말하지 않겠습니다. 본 글의 목적은 원본 코드에 대한 간단한 분석을 통해 jQuery의 내부 구조 디자인과 jQuery가 JavaScript의 고급 특성을 어떻게 활용하여 이렇게 위대한 JavaScript 라이브러리를 구축하는지를 토론하고자 합니다.
jQuery
핵심 기능으로 볼 때, jQuery는 단지 간단하면서도 평범한 일: 조회를 했을 뿐이다.그것의 문법이 이렇게 간단명료해서 많은 사람들이javascript가 무엇인지 모를 때 이미 jQuery를 사용할 수 있게 되었다. 한 단어로 표현하자면 바로 큰길에서 간단함이다.디자인 차원에서 볼 때 우리는 jQuery가 제공하는 방법을 정적 방법과 실례적 방법으로 두 가지로 나눌 수 있다.정적 방법은 $에 직접 접근하는 방법입니다. 이 방법들은dom 요소에 대한 작업이 아니라, aax 요청, 문자열에 대한 일반적인 작업을 제공합니다. 이외에 jQuery는 자신의 확장 메커니즘을 제공합니다. extend 방법으로 필요한 구성 요소를 작성할 수 있습니다.실례적인 방법은 정적 방법과 다르다. 이것은 jQuery가 조회하는 DOM 요소를 조작하는 데 사용된다. jQuery가 $()를 실행하면 jQuery 대상을 구축한다. 이 대상은 검색된 모든 DOM 요소를 수조로 저장한 다음에 이 대상의 원형 체인에서 이러한 DOM 조작을 실현한다. 예를 들어 each() 방법은 모든 DOM 요소를 훑어보는 데 쓰인다.내가 방금 이 대상을'수조로 저장한다'고 말한 것을 알 수 있을 것이다. 즉, jQuery가 구축한 이 대상은 수조가 아니다. 그러면 이 대상은 도대체 무엇입니까?사실 이 대상이 바로 jQuery의 핵심이며'jQuery 대상'이라고도 불린다.따라서 본고의 중점은 jQuery 대상을 분석하고 토론하는 것이다.
jQuery 객체
일반적으로 jQuery는 다음과 같이 사용됩니다.

$('div').each(function(index){
     //this ...
});

$('div') 실행이 끝난 후에 jQuery 대상을 되돌려줍니다. each () 방법은 이 대상의 DOM 요소를 훑어보는 것입니다. $('div') 의 실행 과정을 먼저 봅시다. (본고의 원본 코드는 jQuery 3.0에서 발췌한 것입니다.)

jQuery = function(selector, context) {
    return new jQuery.fn.init(selector, context);
}

이 방법은 $('div')의 입구 방법이고 $는 jQuery의 약자이며 jQuery('div')에 해당한다. 이를 통해 알 수 있듯이 이 방법은 단지 한 가지 일만 했다. 바로 jQuery로 돌아가는 것이다.fn.init () 함수의 실례 대상, jQuery.fn.init는 또 무엇일까요? 다음 코드를 다시 봅시다.

init = jQuery.fn.init = function(selector, context, root) {
    //... 
   return this;
}
init.prototype = jQuery.fn;

jQuery.fn.init와 init는 같은 방법을 인용했다. 이 방법은 selector에 따라 조건에 맞는 DOM 요소를 조회하고 되돌려준다. 그러나 되돌려주는 것은this이다. 이this는 무엇일까?우리는 이따가 분석을 하고 먼저 아래의 이 말을 보겠다.

init.prototype = jQuery.fn;

이 말은 무슨 뜻일까요? 이 말은 init 방법의prototype 대상이 jQuery를 가리키게 하는 것입니다.fn 대상, 그럼 jQuery.fn은 또 뭐야?우리는 계속해서 코드를 보았다.

jQuery.fn = jQuery.prototype = {

    // The current version of jQuery being used
    jquery: version,

    constructor: jQuery,

    // The default length of a jQuery object is 0
    length: 0,

    // Execute a callback for every element in the matched set.
    each: function(callback) {
        return jQuery.each(this, callback);
    },
       
    splice: arr.splice
};

편폭을 절약하기 위해서, 나는 그 중의 일부 코드를 생략했다. 여기서 알 수 있듯이, jQuery.fn은 사실 jQuery의 원형 대상이다. 이 원형 대상에서this 대상을 조작하는 방법을 정의했다.여기까지 당신은 약간 돌아가는 것을 느꼈는지 조급해하지 마세요. 우리는 생각을 정리해 봅시다. jQuery는 먼저 init 방법을 정의한 다음에 init의 원형 대상인prototype에 일련의 조작 방법을 정의했습니다.마지막으로 init 방법의 실례 대상을 되돌려줍니다.따라서 위의 절차는 다음과 같이 간소화할 수 있다(위조 코드 표시).

var init = function(selector, context, root) {
   //...
   return this;
}
init.prototype = {
   length:0,
   each:function(callback) {
      //...
   },
   splice:[].splice
}
jQuery = function(selector, context, root) {
   return new init(selector, context, root);
}

그럼 질문이 왔습니다, jQuery.fn의 방법은 왜 init의prototype에 직접적으로 정의되지 않고 jQuery의 원형 대상에 정의됩니까?
사실 이렇게 하는 목적은 jQuery의 조회 효율을 높이기 위해서이다. init의prototype 대상에 직접 정의되면 조회를 실행할 때마다 메모리에 이런 방대한prototype 대상을 만들 것이다. 만약에 이 대상을 jQuery의prototype에 정의하면 jQuery가 불러올 때 이 대상은 초기화되어 메모리에 계속 존재한다.앞으로 $() 를 실행할 때마다 init의prototype을 이 대상에게 가리키면 됩니다. 매번 같은 대상을 만들지 않아도 됩니다.
우리 다시 한 번 init 함수에서 되돌아오는 this가 도대체 무엇인지 살펴보자. 내가 이전 블로그에서 말했듯이 함수 중의 this는 항상 운행기의 호출자를 가리킨다. 그러면 init의 호출자는 누구일까?위 코드에서 호출자를 찾을 수 없을 것 같습니다. 이 때 우리는 new 연산자의 운행 메커니즘을 깊이 이해해야 합니다. 제가 전에 블로그에서 new 연산자에 대한 설명을 빌려서 new init()의 집행 과정을 다음과 같이 분해합니다.

new init(selector, context, root) = {
    var obj = {};
    obj.__proto__ = init.prototype;
    var result = init.call(obj, selector, context, root);
    return typeof result === 'object' ? result : obj;
}

만약 new의 운영 메커니즘에 대해 이해하지 못한다면 블로그를 참고하십시오: new 조작부호를 깊이 이해하십시오
상기 분해 과정을 통해 알 수 있듯이 자바스크립트는 new를 통해 실례 대상을 만들 때 먼저 일반 대상 obj를 만들고 obj의 내부 속성을proto__ init의 원형 대상을 가리키기 때문에 obj의 원형 체인은 바뀌고 3단계는 콜 방법으로 init()를 호출하기 때문에 init의this는 여기의obj 대상을 가리킨다.
init () 를 실행하면 일치하는 모든 DOM 대상을 수조로this 대상에 저장하고 되돌려줍니다. 즉,obj 대상을 되돌려줍니다. new 연산자는 최종적으로 이obj 대상을 새로운 실례 대상으로 되돌려줍니다.그래서 new 연산자가 되돌아오는 이 실례 대상은 두 가지 특징을 가진다. 하나는 DOM 조회 결과 집합을 포함하고 다른 하나는 그 원형 체인이 init의prototype을 계승하고 init의prototype은 jQuery를 가리킨다.fn 대상, 따라서 실례 대상도 이러한 조작 방법을 갖추고 있다.
jQuery는 조회를 실행할 때마다 jQuery 대상을 만들고 같은 프로그램에서 모든 jQuery 대상은 같은 jQuery 원형 대상을 공유합니다.따라서 jQuery 이미지는 DOM 조회 결과 집합을 포함할 뿐만 아니라 jQuery 원형 대상의 조작 방법을 계승했다.이렇게 하면, 검색한 후에 이 DOM 요소들을 직접 호출해서 조작할 수 있다.이것이 바로 jQuery의 핵심 구조 디자인입니다. 간단하고 편리하며 실용적입니다!
만약 당신이 위의 설명을 이해하지 못한다면 조급해하지 마세요. 저는 jQuery의 디자인 사고방식에 따라 완전한 작은 프로젝트 jDate를 썼습니다. 당신은 비교해서 이해할 수 있습니다!jDate 프로젝트가github에 업로드되었습니다. 여기를 클릭하여 전체 코드를 볼 수 있습니다. jDate, 다른 견해가 있으면 토론을 환영합니다!
jQuery의 결함
jQuery의 핵심 구조에 대한 분석을 통해 우리는 매번 조회를 실행할 때마다 jQuery는 메모리에 복잡한 jQuery 대상을 구축해야 한다는 것을 알 수 있다. 모든 jQuery 대상은 같은 jQuery 원형을 공유한다고 하지만 jQuery의 조회 과정은 생각보다 복잡하다. 이것은 다양한 일치 표지를 고려해야 할 뿐만 아니라또한 서로 다른 브라우저의 호환성을 고려해야 한다.따라서 만약에 당신이 DOM에 대해 간단한 조작만 한다면 원생 방법인query Selector를 사용하여 jQuery를 대체하는 것을 권장합니다. 그러나 원생 방법을 사용할 때 서로 다른 응용 장면에 대해 호환적인 작업을 해야 할 수도 있습니다. 취사를 배워서 jQuery에 지나치게 의존하지 마세요!
 
 
오리지널 게시@1픽셀 2016.01