jQuery 소스 구조분석 5. jQuery.fn.init

jQuery 소스 코드의 전체 구조를 살펴보자.

오픈소스를 제대로 분석하려면 무엇보다 전체적인 구조를 파악해야 한다.

---

4. jQuery.fn.init

jQuery 소스 구조분석 2. 함수 객체, $ 포스팅에서 jQuery 라는 변수를 선언하여 function 객체를 참조한다는 것을 알게 되었다.

(Code Line: 70 ~ 74)
var jQuery = function( selector, context ) {
    
    return new jQuery.fn.init( selector, context );
 
}

위처럼 내부 코드에서는 jQuery.fn.init 생성자 함수를 new keyword를 통해 객체를 생성하여 넘겨준다.

 

jQuery(....) 하면

즉, $(...) 하면 객체 하나가 리턴된다는 것을 알게되었다. 

jQuery.fn,init(...)를 자세히 알아보자.

결론부터 말하자면

선택자를 인자로 받아 jQuery.fn.init 함수를 이용해 DOM 요소를 선택한다,

jQuery.fn.init 함수에서는jQuery 프로토타입 객체를 반환하는데, 이 객체에는 선택된 DOM 요소가 포함되어 있다.

 

(Code Line: 2776 ~ 2879)
jQuery.fn.init = function( selector, context ) {
  var match, elem;

  // HANDLE: $(""), $(null), $(undefined), $(false)
  if ( !selector ) {
    return this;
  }

  // Handle HTML strings
  if ( typeof selector === "string" ) {
    
    // ...more Code
  }

    return jQuery.makeArray( selector, this );
};

 

(Code Line: 2882)
init.prototype = jQuery.fn;

 

그림으로 표현하면 이와 같다.

이것으로 JQuery 구조 분석을 마치겠다.

---

 

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.