javascript_jquery_basic_4_1a

$(selector)는 어떻게 동작하는가?

'$' 변수

// jQuery-3.2.1.js - Code Line 10246
window.jQuery = window.$ = jQuery;

jQuery와 $는 동일한 변수다

jQuery 소스 코드 분석 2. 함수 객체 $

'jQuery' 변수

// jQuery-3.2.1.js - Code Line 94
var jQuery = function( selector, context ) {
    return new jQuery.fn.init( selector, context );
},

jQuery 변수는 jQuery.fn.init 생성자를 호출하여 새로운 인스턴스를 생성하여 반환하는 함수로 정의되어 있다. (new를 사용하는 함수이므로 생성자로 부른다)

Help understanding jQuery's jQuery.fn.init Why is init in fn

jQuery.fn

jQuery.fn은 jQuery.prototype의 별칭이다. 이것은 타이핑을 줄일 수 있다.

What does jQuery.fn mean?
Why jQuery do this: jQuery.fn.init.prototype = jQuery.fn?

jQuery.fn.init 생성자

// jQuery-3.2.1.js - Code Line 2960
init = jQuery.fn.init = function( selector, context, root ) {
	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 );
};

// jQuery-3.2.1.js - Code Line 3060
init.prototype = jQuery.fn;

jQuery.fn.init 생성자는 jQuery.prototype 객체와 selector로 전달된 DOM 요소의 검색 결과를 포함하여 반환한다. init 함수의 prototype 객체는 jQuery.fn 객체를 가리키도록 설정되어 있다.

즉, 다음과 같은 구조가 형성된다.

예를들어, $("p")를 실행하면 jQuery.fn.init 인스턴스가 생성되며 내부에는 검색된 DOM 요소를 가지게 되고, init.prototype은 jQuery.fn를 가리키므로 jQuery 객체의 메서드를 사용할 수 있게 된다. (프로토타입 기반의 함수 공유)

자바스크립트의 생성 규칙은 모든 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 prototype 객체를 자신의 __proto__ 프로퍼티로 연결한다.

$("p").redColor() 동작 과정

// IIFE로 jQuery 변수를 $로 받아서 $.fn(jQuery.fn)에 redColor함수를 추가한다.
(function($) {
  $.fn.redColor = function() {
    // this === jQuery.fn.init 객체
    this.each(function(index) {
      // $(this) === DOM 요소 (p)
      $(this).css("border", "4px solid #f00");
      // $(this)는 다시 새로운 jQuery.fn.init 객체를 생성해 반환한다.
      // jQuery-3.2.1.js - Code Line 3041
      /* HANDLE: $(DOMElement)
	 else if ( selector.nodeType ) {
	    this[ 0 ] = selector;
	    this.length = 1;
            return this;
          } 
      */
    })
    // 메서드 체인닝 호출을 위해 this 리턴
    return this;
  }
})(jQuery);

redColor() 예제

jQuery.fn.each() & jQuery.each()

// jQuery.fn.each
// jQuery-3.2.1.js - Code Line 156
each: function( callback ) {
    return jQuery.each( this, callback );
},

// jQuery.each
// jQuery-3.2.1.js - Code Line 356
each: function( obj, callback ) {
    var length, i = 0;

    if ( isArrayLike( obj ) ) {
        length = obj.length;
        for ( ; i < length; i++ ) {
            if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                break;
            }
        }
    } else {
        for ( i in obj ) {
            if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                break;
            }
        }
    }
    return obj;
},

jQuery.fn.each()를 호출하면, this를 매개변수로 jQuery.each()를 호출한다.

jQuery 소스 코드 분석 5. jQuery.fn.init
jQuery 소스코드 분석과 함께하는 자바스크립트 공부

---

jQuery.extend()와 jQuery.fn.extend()

$("p")와 같이 선택자를 사용하려고 하는 경우 jQuery.fn에 메서드를 추가해야 한다.
선택자를 사용하는 경우 jQuery.prototype 객체를 참조하는 jQuery.fn.init 인스턴스가 생성되기 때문에 jQuery 객체에 추가된 메서드는 사용할 수 없다.

• 선택자를 사용하지 않는 경우 jQuery.extend() 사용
• 선택자를 사용하는 경우 jQuery.fn.extend() 사용

jQuery.extend({
    abc: function(){
        alert('abc');
    }
});
// usage: $.abc(). (No selector required like $.ajax().)

jQuery.fn.extend({
    xyz: function(){
        alert('xyz');
    }
});
//usage: $('.selector').xyz(). (Selector required like $('#button').click().)

jQuery : 플러그인 개발
Difference between jQuery.extend and jQuery.fn.extend?

Sizzle

A pure-JavaScript CSS selector engine

jQuery 1.3 버전부터 포함되어 사용되고 있다.

// jQuery-3.2.1.js - Code Line 538
var Sizzle = (function( window ) {
    function Sizzle( selector, context, results, seed ) {
        //...
        return result; // Array
    }
    //...
    return Sizzle;
})( window );

jQuery.find로 Sizzle 함수를 참조하여, jQuery.fn.find나 jQuery.fn.closet와 같이 요소 탐색이 필요한 곳에서 사용되고 있다.

// jQuery-3.2.1.js - Code Line 2795
jQuery.find = Sizzle;

// jQuery-3.2.1.js - Code Line 2903
jQuery.fn.extend( {
    find: function( selector ) {
        var i, ret,
            len = this.length,
            self = this;

        if ( typeof selector !== "string" ) {
            return this.pushStack( jQuery( selector ).filter( function() {
                for ( i = 0; i < len; i++ ) {
                    if ( jQuery.contains( self[ i ], this ) ) {
                        return true;
                    }
                }
            } ) );
        }

        ret = this.pushStack( [] );

        for ( i = 0; i < len; i++ ) {
            jQuery.find( selector, self[ i ], ret );
        }

        return len > 1 ? jQuery.uniqueSort( ret ) : ret;
    },
})

// jQuery-3.2.1.js - Code Line 3091
jQuery.fn.extend( {
    closest: function( selectors, context ) {
        var cur,
            i = 0,
            l = this.length,
            matched = [],
            targets = typeof selectors !== "string" && jQuery( selectors );

        // Positional selectors never match, since there's no _selection_ context
        if ( !rneedsContext.test( selectors ) ) {
            for ( ; i < l; i++ ) {
                for ( cur = this[ i ]; cur && cur !== context; cur = cur.parentNode ) {

                    // Always skip document fragments
                    if ( cur.nodeType < 11 && ( targets ?
                        targets.index( cur ) > -1 :

                        // Don't pass non-elements to Sizzle
                        cur.nodeType === 1 &&
                            jQuery.find.matchesSelector( cur, selectors ) ) ) {

                        matched.push( cur );
                        break;
                    }
                }
            }
        }

        return this.pushStack( matched.length > 1 ? jQuery.uniqueSort( matched ) : matched );
    },
})

Sizzle
How jQuery selects elements using Sizzle
jQuery 퍼포먼스 향상을 위한 Tips And Tricks