jQuery 핵심 아키텍처 디자인에 대해 이야기해 보세요.

jQuery는 누구에게나 낯선 것이 아니기 때문에 여기서는 그것이 무엇인지, 무엇을 하는지에 대해 많이 언급하지 않겠습니다. 이 글의 목적은 소스 코드에 대한 간단한 분석을 통해 jQuery의 핵심을 논의하는 것입니다. , jQuery가 JavaScript의 고급 기능을 활용하여 훌륭한 JavaScript 라이브러리를 구축하는 방법을 설명합니다.

1 jQuery 첫 소개

핵심 기능 관점에서 jQuery는 간단하고 일반적인 작업인 쿼리 하나만 수행합니다. 그 구문은 너무 간결하고 명확해서 많은 사람들이 이미 javascript가 무엇인지 모르고 jQuery를 사용해 본 적이 있을 것입니다. 이를 한 단어로 표현하면 단순함과 단순성입니다.

디자인 관점에서 jQuery가 제공하는 메소드는 크게 정적 메소드와 인스턴스 메소드 두 가지로 나눌 수 있습니다. 정적 메서드는 $를 통해 직접 액세스되는 메서드입니다. 이러한 메서드는 일반적으로 DOM 요소에서 작동하지 않지만 ajax 요청 및 문자열에 대한 일부 일반적인 작업과 같은 몇 가지 일반적인 도구를 제공합니다. 확장 메소드를 통해 필요한 구성요소를 작성하십시오. 인스턴스 메소드는 정적 메소드와 다릅니다. jQuery는 $()를 실행하여 jQuery 객체를 생성합니다. 이 객체는 쿼리된 모든 DOM 요소를 배열 메소드에 저장합니다. this 객체의 프로토타입 체인은 이러한 DOM을 작동하기 위한 메서드를 구현합니다. 예를 들어, Each() 메서드는 각 DOM 요소를 탐색하는 데 사용됩니다.

방금 이 개체가 "배열로" 저장된다고 말한 것을 눈치채셨을 것입니다. 즉, jQuery로 생성된 개체는 배열이 아닌데, 이 개체는 정확히 무엇입니까? 실제로 이 개체는 "jQuery 개체"라고도 알려진 jQuery의 핵심입니다. 따라서 이 글의 초점은 jQuery 객체를 분석하고 논의하는 것입니다.

2 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는 동일한 메서드를 참조합니다. 이 방법은 선택기가 조건을 충족하는 DOM 요소를 쿼리하여 반환하지만 반환되는 내용은 무엇입니까? 나중에 분석해 보겠습니다.

init.prototype = jQuery.fn;
이 문장은 무엇을 의미하나요? 문장은 init 메소드의 프로토타입 객체가 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의 프로토타입 개체입니다. 객체는 객체가 작동하는 메서드에 대한 일부 참조를 정의합니다. 이 시점에서 약간 혼란스럽다고 느껴지더라도 걱정하지 마세요. 아이디어를 정리해 보겠습니다. jQuery는 먼저 init 메서드를 정의한 다음 init 프로토타입 개체 프로토타입에 일련의 작업 메서드를 정의합니다. 마지막으로 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의 프로토타입에 직접 정의되지 않고 프로토타입에 정의되어 있는지입니다. jQuery의?

사실 이것의 목적은 jQuery의 쿼리 효율성을 높이기 위한 것입니다. init의 프로토타입 개체에 직접 정의하면 쿼리가 실행될 때마다 이렇게 거대한 프로토타입 개체가 생성됩니다. 이 객체가 jQuery의 프로토타입에 정의된 경우 이 객체는 jQuery가 로드될 때 초기화되고 나중에 $()가 실행될 때마다 항상 메모리에 존재하게 되며 init에서 프로토타입을 가리키기만 하면 됩니다. 매번 동일한 개체를 만드는 대신 이 개체를 사용하세요.

이것이 init 함수에서 반환되는 것을 살펴보겠습니다. 이전 블로그에서 함수의 이 값은 런타임 중에 항상 호출자를 가리킨다고 말했습니다. 위 코드에서는 호출자를 찾을 수 없는 것 같습니다. 이때 new 연산자의 작동 메커니즘을 깊이 이해해야 합니다. 이전 블로그의 new 연산자에 대한 설명을 빌려서 의 실행 프로세스를 수행하겠습니다. new init()은 다음과 같이 분류됩니다:

new init(selector,context,root) = {

 var obj = {};

 obj.__proto__ = init.prototype;

 init.call(obj,selector,context,root);

 return typeof result === 'obj'? result : obj;

}