jQuery 구조 함수 분석에 대한 간단한 설명

지난 글에서 jQuery의 대략적인 구조를 논술했고 모든 코드가 자체 호출 익명 함수에 쓰여 있고 window 대상에게 전송되었다는 것을 알았다. 원본 코드는 다음과 같다.

(function( window, undefined ) {...})( window );

우리는alert(jquery)를 통해 그것이 하나의 대상이라는 것을 알고 있다. 그러면 이 대상은 어떻게 구성된 것일까?$(document) 와 유사한 문법으로 요소를 가져옵니다. 일반적인 방법을 직접 호출한 것처럼 jQuery가 일반적인 함수입니까?구조 함수라면 왜 new$(document)의 흔한 형식이 아닙니까?
사실 jQuery는 대상을 대상으로 하는 js 라이브러리이고 구조 함수도 있다. 매번 jQuery 방법을 호출할 때마다 하나의 jQuery 대상을 실례화하지만 jQuery의 쓰기 방법은 매우 뛰어나다.
먼저 js가 대상을 대상으로 하는 것에 대해 이야기하자. js는 대상을 대상으로 하는 언어가 아니지만 대상을 대상으로 하는 문법도 많다. 여기서 도령의 에서 대상을 대상으로 하는 프로그램 설계 부분을 추천한다.여러 가지 방법 중에서 비교적 자주 사용하는 문법은 구조 가원형 방식이다. 다음은 예를 들어 다음과 같다.

var Person=function(name,age){
  this.name=name;
  this.age=age;
}
Person.prototype={
 constructor:Person,
 init:function(msg){
  this.say(msg);
 },
 say:function(msg){
 alert(this.name+' '+msg);
 }
};
var tom=new Person('tom',23); 
tom.init('  ');// tom   

사실 jQuery도 이런 방식을 채택했다. 단지 더욱 똑똑한 문법을 사용했을 뿐이다. 함께 jQuery의 구조 함수가 어떤 차이가 있는지 살펴보자.

// Define a local copy of 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의 진정한 함수는 init 방법입니다. jQuery를 호출할 때 new init () 의 결과를 직접 new jQuery () 로 되돌려줍니다.
jQuery.fn은 무엇입니까, 뒤에서 우리는 이런 코드를 볼 수 있습니다

jQuery.fn = jQuery.prototype = {...

이렇게 하면 이해하기 쉬워요. 사실 jQuery.fn은 바로 원형 대상이다. 즉, jQuery 원형 안에 init 방법이 있는데 이 방법은 진정한 구조 함수이다.이렇게 쓰면 $()를 쓸 필요가 없다는 장점이 있다.init () 라는 동작은 바로 초기화되었지만, 또 하나의 문제는 init가 구조 함수인 이상 우리가 jQuery에 쓴 방법의 실례를 호출할 수 없다는 것이다.init의 실례화는 자연히 init의 방법만 호출할 수 있다. 뒤에 이런 코드를 보면

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

전에 jQuery라고 말씀드렸잖아요.fn=jQuery.protype, 이것은 jQuery의 원형 대상이 init의 원형을 부여했다는 것을 의미한다. 그러면 jQuery의 원형 방법은 자연히 init도 가지게 된다. 이런 구조 방식을 통해 S는 jQuery 방법을 사용하는 것이 매우 간단하고 new jQuery () 의 조작도 필요 없고 수동으로 초기화할 필요도 없이 일반 함수를 호출하는 것처럼 간단하다.