[JS] Jquery 알아보기

jquery-3.3.1.js

jquery 소스 내부를 분석해볼 것이다.

가볍게 구조를 파악하는 정도..? 

그 후, 자주 사용했던 jquery 메서드들 중 몇 개도 분석을 해볼거다.

( function( global, factory) {

.......    // (1)

factory( global );

})(typeof window !== "undefined" ? window : this, function( window, noGlobal){ // (2)

........    // (3)

}(.....);

jquery 파일을 열어보면 위와 같은 코드가 처음으로 등장한다.

위와 같은 함수를 즉시 실행 함수라고 하며 함수를 정의함과 동시에 바로 실행되는 특징이 있다.

즉시 실행 함수 내부에서 변수와 함수들을 정의해서 함수 외부에서 접근할 수 없게 하려는 것 같다.

즉시실행함수의 매개변수로 전역객체가 전달되는데,

일반 js에서는 window가 전역객체이고 node.js에서는 global이 전역객체이다.

(1)과 (2)는 노드 js와 일반적인 js의 전역객체의 차이 때문에 필요한 듯 싶다.

(3)번 안을 살펴보자.

"use strict"

.....

var version = "3.3.1",

jQuery = function( selector, context ) {    // (1)

return new jQuery.fn.init( selectore, context );

},

.......;

jQuery.fn = jQuery.prototype = {    // (2)

jquery : version,

constructor : jQuery,

length : 0,

toArray : function() {

return slice.call( this );

},

........

};

jQuery.extend = jQuery.fn.extend = function() {    // (3)

var options, name, src, copy, copyIsArray, clone,

target = arguments[ 0 ] || {},

i = 1,

length = arguments.length,

deep = false;

..........

}

jQuery.extend( {

.......

} );

var Sizzle = ( function( window ) {

} );

(1)번을 살펴보자.

jQuery 변수에는 함수 객체가 저장되며, 이 함수 객체는 jQuery.fn.init 생성자 함수를 통해 생성된 객체를 반환한다.

jQuery.fn 객체의 init 메서드를 생성자 함수로 이용하는 걸까..?

(2)번을 살펴보자.

jQuery.fn 객체는 앞에서 생성된 jQuery 객체의 프로토타입과 연결된다.

즉, jQuery 객체는 jQuery.fn 객체의 메서드와 프로퍼티에 접근할 수 있다.

(3)번을 살펴보자.

jQuery객체와 jQuery.fn 객체에 extend라는 메서드를 추가한다.

jQuery에 전달된 매개변수 arguments 객체를 다룬다... 선택자?

.......

var _jQuery = window.jQuery,

_$ = window.$;

jQuery.noConflict = function( deep ) {

if( window.$ === jQuery ) {

window.$ = _$;

}

if ( deep && window.jQuery === jQuery){

window.jQuery = _jQuery;

}

return jQuery;

};

if( !noGlobal){

window.jQuery = window.$ = jQuery;

}

return jQuery;

});

맨 마지막 코드이다.

우리가 jQuery를 어떻게 $로 쓸 수 있는 지를 알 수 있다.