jquery 분석

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

익명함수 정의하면서 바로 실행하는 형태.

전역객체를 만들지 않도록 하는 아주 전형적인 구조.

익명함수 내부에서도 window라는 파라미터로 참조된다.

 

아래부터 위 익명함수 내부 소스.

 

(1) jQuery라는 function 객체생성

var jQuery = function(selector, context) {

	return new jQuery.fn.init(selector, context, rootjQuery);
}

jQuery 변수 선언 후, function객체 할당. 내부에서는 init 생성자 함수를 통해 객체를 생성해서 넘겨준다.

즉, jQuery(...)를 하면 객체하나가 리턴된다.

 

(2) jQuery.fn이라는 Object 객체 생성

jQuery.fn = jQuery.prototype = {
	constructor : jQuery,
	init : function(selector, context, rootjQuery) {
		...
	},
	...
}

(1)에서 jQuery function 안에서 new init(...) 하던 init이 바로 여기서 정의된 init이다.

init function의 내용은, selector 인자의 type에 따라 DOM 검색이나, DOM 객체생성 등등을 해서 Array 형태로 만들어 return 하도록 되어있다.

이것이 jQuery에서 말하는 확장집합.

 

(3) jQuery.fn.init.prototype 연결

jQuery.fn.init.prototype = jQuery.fn

이것은 init 함수객체의 prototype에 jQuery.fn 객체를 세팅. 이럴 경우,

var aaa = new jQuery.fn.init(...)처럼했을 경우 aaa는 jQuery.fn 객체를 상속받게 된다.

결국 aaa 객체는 init 함수를 거친 확장집합 객체가 되는데, 자바스크립트의 prototype 상속에 의해서 jQuery.fn에 정의된 property를 호출할 수 있게 된다.

 

(4) extend 함수 정의

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

    var ...
        target = arguments[0] || {},
        ...
        length = arguments.length,
        ...
    ...
    for(; i < length; i++) {

        ...
        target[name] = copy;
        ...
    }

 

jQuery 객체와 jQuery.fn 객체 모두에 extend 라는 property로 function객체를 참조하도록한다.

extend 함수의 내용은 인자로 넘어온 여러 property를 this객체에 복사하는 기능을 한다.

그런데 자바스크립트에서 this는 호출할 때 결정되는 요소이므로, jQuery.extend(...)를 하면 jQuery 객체에 추가되고, jQuery.fn.extend(...)를 호출하면 jQuery.fn 객체에 추가된다.

 

(5) jQuery 객체에 property 추가

jQuery.extend({

    noConflict : function(deep) ...
    isReady : ...
});

jQuery 객체에 property가 추가된다.

이것은 jQuery.xxx = ... 형태로 코딩하는 것과 같아.

 

(6) jQuery.fn 객체에 property 추가

jQuery.fn.extend({
    data : function() {},
    ...
});

jQuery.fn 객체에 property추가

jQuery.fn.xxx = ... 형태로 코딩하는 것과 같아.

 

이후 소스 대부분 jQuery객체에 뭔가를 추가하거나, jQuery.fn 객체에 뭔가를 추가하는 형태.

 

(7) $와 jQuery를 전역객체로 만들기

window.jQuery = widnow.$ = jQuery;

(1)번의 익명함수 내부의 변수였던 jQuery를 window객체의 property로 추가한다. window 객체의 property가 된다는 것은 전역 객체가 된다는 의미.

 

추가.

$("#myDiv").html("test");

위 코드는 아래와 같다.

var aaa = jQuery("#myDiv");
aaa.html("test");

var aaa = new jQuery.fn.init("#myDiv", ...);
aaa.html("test");

 

 

출처:

blog.naver.com/jjoommnn/130141474121