jQuery의 내부 원리와 구현 방법에 대한 간략한 분석_jquery

이 기간 동안 jQuery 소스 코드를 연구해 왔습니다. jQuery의 발전으로 인해 jQuery를 연구하는 전문가도 점점 많아지고 있으며, 지난 2년보다 훨씬 더 많은 학습 자료를 찾을 수 있게 되었습니다. Gao Yun jQuery1.6.1 소스 코드 분석 시리즈와 같은 좋은 리소스. 이 튜토리얼은 jQuery의 내부 원리와 구현 방법을 매우 자세하게 분석하여 jQuery를 학습하고 이해하는 데 매우 도움이 됩니다. 그러나 개인적으로 많은 튜토리얼이 jQuery의 전반적인 결과를 완전히 이해하지 못하고 있다고 생각합니다. jQuery의 내부 구현을 전체적으로 설명하려고 합니다.

우리 모두 알고 있듯이 jQuery를 호출하는 방법에는 두 가지가 있습니다. 하나는 $("h1")를 통해 모든 h1 요소를 선택하는 등 매개변수를 전달하여 DOM 선택을 구현하는 상위 수준 구현이고, 두 번째는 ajax 작업이 $.ajax를 통해 구현되는 경우 상대적으로 낮은 수준의 구현입니다. 그렇다면 이 두 가지 방법의 차이점은 무엇입니까? $('h1') 및 $.ajax를 감지하려면 typeof 함수를 사용하세요. jQuery를 조금 배운 사람이라면 누구나 이를 알고 있거나 들어본 적이 있을 것입니다. jQuery 객체는 무엇이며 jQuery와 jQuery의 관계는 무엇입니까? 먼저 for(var i in $(")) document.write(i " :::" $("")[i] "")를 통해 jQuery 객체의 속성과 해당 값을 인쇄해 보겠습니다. 100개 이상의 속성이 있습니다. 콘솔에 $("*")를 입력하면 대부분의 속성이 jQuery 프로토타입에서 상속된 속성임을 알 수 있습니다.

이제 jQuery의 구현이 다음과 유사할 수 있다고 추측해 보겠습니다.

function jQuery(){
 this[0]="Some DOM Element";
 this[1]="Some DOM Element";
 this[2]="Some DOM Element";
 this.length=3;
 this.prevObject="Some Object";
 this.context="Some Object";
 this.selector="Some selector";
}
jQuery.prototype={
get:function(){},
each:function(){},
......
}

이러한 코드는 new 연산자를 통해 위의 속성을 가진 jQuery 객체를 생성할 수 있지만 실제로 jQuery 객체를 생성하기 위해 jQuery를 호출할 때 new 연산자를 사용하지 않습니다. jQuery 구현을 살펴보겠습니다.

var jQuery = function( selector, context ) {
 // The jQuery object is actually just the init constructor 'enhanced'
 return new jQuery.fn.init( selector, context, rootjQuery );
}
jQuery.fn=jQuery.prototype={
 jquery: core_version,
 init:function(selector,context){
 //some code
 return this;
 }
 //some code there
 //......
}
jQuery.fn.init.prototype=jQuery.fn;

여기에는 몇 가지 매우 영리한 점이 있습니다. 첫 번째 요점은 new를 사용하지 않고 객체를 생성하는 목적을 달성하기 위해 jQuery 프로토타입 속성의 init 메서드를 통해 객체를 생성하는 것입니다. 두 번째 요점은 init에서 this 포인터를 처리하는 것입니다. 방법. 우리는 jQuery 인스턴스를 반환하기 위해 init를 호출함으로써 이 인스턴스가 jQuery.prototype의 속성을 상속해야 하고 init의 이 인스턴스가 jQuery.prototype의 속성을 상속한다는 것을 알고 있습니다. 그러나 init의 이 항목에는 범위 제한이 적용되며 jQuery.prototype의 다른 속성에 액세스할 수 없습니다. jQuery는 'jQuery.fn.init.prototype=jQuery.fn' 문장을 통해 프로토타입을 jQuery.fn으로 지정하므로 jQuery는 init에 의해 생성된 객체에는 jQuery.fn의 속성이 있습니다.

이 시점에서 jQuery의 기본 프로토타입이 등장했습니다. 여기에는 두 개의 객체가 있는데, 하나는 jQuery 생성자이고 다른 하나는 이 생성자에 의해 생성된 객체입니다(우리는 이를 jQuery 객체라고 부르는데, 이는 일반 객체와 다르지 않습니다). 다음 관계 다이어그램에서 볼 수 있습니다.

jQuery 생성자와 jQuery.prototype에는 두 개체의 호출 메서드가 서로 다르다는 것을 알 수 있습니다. 두 개체 모두 자체 속성과 메서드를 확장하는 데 사용됩니다. jQuery 내에서 확장 구현은 실제로 동일한 코드에 의존하며, 이는 후속 소스 코드 분석에서 자세히 분석됩니다.