jQuery 소스 코드 분석 - 2 코드 전체 구조 와 핵심 방법

이 내용 은 http://nuysoft.iteye.com/blog/1182087 에서 옮 겨 져 필 자 는 일부 수정 을 했다.
 
jQuery 변수 와 확장 방법 을 제거 하고 다음 간소화 코드 를 살 펴 보 세 요.
 
 

(function( window, undefined ) {
	
//   jQuery  
var jQuery = (function() {

//         
// Define a local copy of jQuery

var jQuery = function( selector, context ) {
		// The jQuery object is actually just the init constructor 'enhanced'
		return new jQuery.fn.init( selector, context, rootjQuery );
	};

// jQuery    prototype  jQuery.fn
jQuery.fn = jQuery.prototype = {
	constructor: jQuery,
	/**
	 * selector   7     ：
       DOM  
       body（  ）
          ：HTML  、HTML   、#id、      
         （  ready    ）
              
	 */
	init: function( selector, context, rootjQuery ) {
	   //            
	}
	
};

// Give the init function the jQuery prototype for later instantiation
// jQuery.fn   jQuery.fn.init.prototype，  init     prototype    jQuery.fn   
jQuery.fn.init.prototype = jQuery.fn;

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

};

//  jQuery       
jQuery.extend({
	// ready bindReady
   // isPlainObject isEmptyObject
   // parseJSON parseXML
   // globalEval
   // each makeArray inArray merge grep map
   // proxy
   // access
   // uaMatch
   // sub
   // browser
});

//    ，jQuery      ，        jQuery jQuery     
return jQuery;

})();

// Expose jQuery to the global object
//  jQuery    $ window    
window.jQuery = window.$ = jQuery;


})( window );

 
 
다음 분석 프레임 워 크 의 코드
 
1、 
jQuery 대상 은 통과 가 아 닙 니 다. new jQuery 만 든 것 이 아니 라 new jQuery.fn.init 창설했어
 
var jQuery = function( selector, context ) {        return new jQuery.fn.init( selector, context, rootjQuery ); }
jQuery 대상 은 jQuery. fn. init 대상 입 니 다.new jQeury () 를 실행 하면 실제 패키지 에서 new jQuery. fn. init 를 실행 하고 마지막 으로 돌아 갑 니 다. jQuery. fn. init 대상;코드 통과
window.jQuery = window.$ = jQuery;
jQuery 와  $window 전역 변 수 를 위 한 jQuery 는 함수 대상 이 므 로 jQuery (selector, context) 를 직접 호출 할 수 있 습 니 다.jQuery 대상 (함수) 을 되 돌려 줍 니 다.여기 서 참고 로 window 대상 에 게 속성 이나 방법 을 추가 하 는 것 은 실제 적 으로 전체 적 인 것 이 므 로 직접 방문 할 수 있 습 니 다. 예 를 들 어 다음 과 같은 코드 입 니 다.
 
window. method 1 = function () {console. info ('전역 방법')};window.method1();//전역 방법 method 1 (); /전역 적 방법
 
2、
코드 에서 먼저 실행 jQuery. fn = jQuery. prototype, 재 실행 jQuery. fn. init. prototype = jQuery. fn, 합 친 코드 는 다음 과 같 습 니 다.
 
jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype
 
jQuery. fn 에 마 운 트 하 는 모든 방법 은 jQuery. prototype, 즉 jQuery 에 마 운 트 하 는 것 과 같 습 니 다. 함수 상 (처음 jQuery = function( selector, context ) ），하지만 결국 마 운 트 된 셈 이다. jQuery. fn. init. prototype, 즉 처음 jQuery 에 마 운 트 된 것 과 같 습 니 다. 함수 가 돌아 오 는 대상, 즉 우리 가 최종 적 으로 사용 하 는 jQuery 대상 에 마 운 트 되 었 습 니 다.
 
 
 
 3、jQuery.fn.init
jQuery. fn. init 의 기능 은 들 어 오 는 selector 매개 변 수 를 분석 하고 다양한 처 리 를 한 다음 에 jQuery 대상 을 생 성 하 는 것 이다.
 
 
유형 (selector)
처리 방식
DOM 요소
jQuery 대상 으로 포장 하고 바로 돌아 가기
body (최적화)
document. body 에서 읽 기
단독 HTML 태그
document.createElement
HTML 문자열
document.createDocumentFragment
#id
document.getElementById
선택 기 표현 식
$(…).find
함수.
dom ready 에 등 록 된 리 셋 함수
 
 
 4、jQuery.extend = jQuery.fn.extend

//jQuery     
/**
 *                    ，jQuery                
 	  jQuery.fn.extend     ，         jQuery.extend       
  	           ，                 target
  	         ，          jQuery   。
	     ，     jQuery          。      jQuery  。
	           ，         ：$.extend({}, object1, object2);
	           ，  target           ，            
	      true，      
	 object           
	undefined      
	         ，JavaScript           
	  ：
	jQuery.extend( target, [ object1 ], [ objectN ] )
	jQuery.extend( [ deep ], target, object1, [ objectN ] )
 */
jQuery.extend = jQuery.fn.extend = function() {
	var options, //     
		name, //      
		src, // 
		copy, // copy      
		copyIsArray, //copy      
		clone,//  copy ，      
		target = arguments[0] || {},// copy    
		i = 1,
		length = arguments.length,
		deep = false;//    copy

	// Handle a deep copy situation
	//           ，      copy
	if ( typeof target === "boolean" ) {
		deep = target;
		target = arguments[1] || {};
		// skip the boolean and the target
		//   boolean target，  3          
		i = 2;
	}

	// Handle case when target is a string or something (possible in deep copy)
	// target         ，         
	if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
		target = {};
	}

	// extend jQuery itself if only one argument is passed
	//          ，     jQuery  
	if ( length === i ) {
		target = this;
		--i;//  i      
	}

	for ( ; i < length; i++ ) {
		// Only deal with non-null/undefined values
		//        
		if ( (options = arguments[ i ]) != null ) {
			// Extend the base object
			for ( name in options ) {
				src = target[ name ];
				copy = options[ name ];

				// Prevent never-ending loop
				//       ， target  copy      
				if ( target === copy ) {
					continue;
				}

				// Recurse if we're merging plain objects or arrays
				//           （json  ）   ，   
				if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
					if ( copyIsArray ) {//     
						copyIsArray = false;
						//       ，  &&           ，          
						//1、src null undefined ，clone []
						//2、src    ，     src  clone
						//3、src     ， clone []
						//      clone   ，  target[ name ]     ，copy           
						clone = src && jQuery.isArray(src) ? src : [];

					} else {
						clone = src && jQuery.isPlainObject(src) ? src : {};
					}

					// Never move original objects, clone them
					//     ， copy
					target[ name ] = jQuery.extend( deep, clone, copy );

				// Don't bring in undefined values
				} else if ( copy !== undefined ) {
					target[ name ] = copy;
				}
			}
		}
	}

	// Return the modified object
	return target;
};

 
jQuery 에서 extend 방법 에 대한 구체 적 인 분석 은 코드 의 주석 을 참조 합 니 다. 코드 에서 보 듯 이 jQuery 의 extend 는 대상 간 의 copy 기능 을 실현 하고 ext 중의 apply 방법 과 같 습 니 다. ext 중의 apply 보다 훨씬 강 합 니 다. ext 중의 extend 방법 은 대상 을 대상 으로 하 는 클래스 계승 과 같 습 니 다. 주로 function 에 대해 계승 을 실 현 했 습 니 다. 속성 과 방법의 계승 을 포함 하여 가능 합 니 다.재 구성 도 계승 할 수 있다.