- jQuery는 웹을 개발할 때 필요한 DOM 파싱, 이벤트 처리나, Ajax 같은 기능을 아주 쉽게 작성할 수 있게 도와주는 라이브러리이다.
1. jQuery 1.0 소스 코드 구조
대략적인 모듈과 모듈 간 인터페이스 등을 어느정도 파악하는 것이 결국엔 소스의 정확한 소스동작 원리를 파악할 수 있는 밑거름이 된다.
1)jQuery 함수 객체
- jQuery 라이브러리는 jQuery() 함수 정의부터 시작한다.
function jQuery(a,c){
//Shortcut for document ready (because $(document).each() is silly)
if(a && a.constructor == Function && jQuery.fn.ready)
return jQuery(document).ready(a);
//Make sure that a selection was provided
a = a || jQuery.context || document;
//Watch for when a jQuery object is passed as the selector
if(a.jquery)
return $(jQuery.merge(a, []);
//Watch for when a jQuery object is passed at the context
if(c && c.jquery)
return $(c).find(a);
//If the context is global, return a new object
if(window == this)
return new jQuery(a,c)
//Handle HTML strings
var m = /^[^<]*(<.+>)[^>]*$/.exec(a);
if(m)a = jQuery.clean([m[1]]);
this.get(
//Watch for when an array is passed in
a.constructor == Array || a.length && !a.nodeType && a[0] ! = undefined && a[0].nodetype ?
//Assume that it is an array of DOM Elements
jQuery.merge(a,[]);
//Find the matching elements and save them for later
jQuery.find(a,c)
);
//See if an extra function was provided
var fn = arguments[arguments.length - 1];
//If so, execute it in context
if(fn && fn.constructor == Function)
this.each(fn)
}2)변수 $를 jQuery() 함수로 매핑
var $ = jQuery;3)jQuery.prototype 객체 변경
jQuery.fn = jQuery.prototype = {
jquery : "$Rev$",
size : function(){
return this.length;
},
...
}4)객체 확장 - extend() 메서드
jQuery.extend = jQuery.fn.extend = function(obj,prop){
if(!prop){prop = obj; obj = this;}
for(var i in prop)obj[i] = prop[i];
return obj;
};- jQuery.extend()메서드를 호출하는 jQuery 코드
jQuery.extend({
init : function(){
jQuery.initDone = true;
...
},
each : function(obj, fn, args){
if(obj.length == undefined)
for(var i in obj)
fn.apply(obj[i], args || [i, obj[i]]);
else
for(var i = 0; i < obj.length; i++)
fn.apply(obj[i], args || [i, obj[i]] );
return obj;
},
...
});
- jQuery.fn.extend() 메서드를 호출하는 jQuery 코드
· 이것은 하나의 객체 인자만으로 호출했기 때문에 이 메서드를 호출한 jQuery.fn 객체(jQuery.prototype 객체)에
obj 인자로 넘겨진 객체의 프로퍼티를 복사하는 코드가 된다.
jQuery.fn.extend({
// We're overriding the old toggle function, so
// remember it for later
_toggle : jQuery.fn.toggle,
toggle : function(a,b){
//If two functions are passed in, we're
//toggling on a click
...
});정리하면 jQuery.extend() 메서드 호출로 jQuery 함수 객체를, jQuery.fn.extend() 메서드 호출로 jQuery.prototype 객체의 기능을 확장한다.
5)jQuery 소스 코드의 기본 구성 요소
- jQuery 함수 객체
- jQuery.prototype 객체
- jQuery 객체 인스턴스
2.jQuery의 id 셀렉터 동작 분석
- jQuery의 가장 기본적인 기능은 HTML 문서에서 원하는 DOM 객체를 선택한 후, 해당 객체의 속성을 변경하거나, 효과, 이벤트 등을 처리하는 것이다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id ="myDiv">Hello</div>
<script>alert($("#myDiv").text())</script>
</body>
</html>
'Language > Java Script' 카테고리의 다른 글
| 자바스크립트 내장 함수 (0) | 2020.03.15 |
|---|---|
| 자바스크립트 실행 순서 (0) | 2020.03.15 |
| 함수형 프로그래밍 (0) | 2020.03.05 |
| 객체지향 프로그래밍 응용 예제 (0) | 2020.03.05 |
| 객체지향 프로그래밍 (0) | 2020.03.04 |
