jQuery 1.6 원본 학습(一)--core.js[1]의 기본 구조

4039 단어 jquery
인터넷에서 jQuery 1.2.6의 원본 코드 분석 강좌를 내렸는데 알 듯 모를 듯해서github원본 다운로드에 가서 원본 코드 학습을 천천히 보고 먼저 core를 말한다.js라는 핵심 파일이죠?
jQuery 전체의 기본 구조는 말하기도 복잡하지 않지만 똑똑히 보려면 시간이 좀 걸린다,core.js라는 파일은 jQuery의 전체 구조를 구축했고 이 파일의 기본 내용은 다음과 같이 요약했다.
 
 
//   jQuery           

var jQuery = (function(){



var jQuery = function( selector, context ) {

		//     $("p")     new  jQuery.fn.init   ,          jQuery  ,        jQuery    ,  jQuery        

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

	},/*

	...

	           ,      ,useragent 

	...

	*/

//      jQuery    jQuery.fn     fn          

jQuery.fn = jQuery.prototype = {

//jQuery       ,          jQuery      

	init :function(){

		//    jQuery    ,           

	},

	/*

	...



	       ,  length,jquery  ,      jquery       

	 :eq,get  。



	...

	*/

}

//  jQuery      

jQuery.fn.init.prototype = jQuery.fn;



//extend    jQuery  (    )      (    )  

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

	/*

	...

	jQuery            extend      ,  jQuery             

	   ,

	...

	*/



};



jQuery.extend({

	/*

	jQuery            ,

	   noConflict,isReady 

	*/

});



/*

...

         ,       ,  ready   

...

*/

//    jQuery     (      )

return jQuery;

})();

이를 통해 알 수 있듯이 jQuery는 크게 두 부분으로 나뉘는데 하나는 정적 방법 부분이고 하나는 실례적인 대상 부분이다. 이 두 부분은 모두 같은 함수인 extend를 통해 확장된 것이다. 아마도 위의 코드는 비교적 추상적으로 보일 것이다. 다음 그림은 전체 구조의 관계를 묘사한다.
이렇게 하면 전체 구조가 훨씬 뚜렷해 보인다.그 중에서 가장 오른쪽에 있는 jQuery 실례는 new jQuery를 통해서입니다.fn.인트가 얻은 거야.이렇게 해서 jQuery로 확장합니다.fn의 방법은 실례적인 방법으로 jQuery 실례에 접근할 수 있고, jQuery 대상 자체로 확장하는 방법은 정적 방법으로 사용할 수 있다.
에서js에서 대부분의 핵심 방법을 확장하기 위해 extend를 호출했습니다. 먼저 extend 방법을 분석합니다.
 
jQuery.extend = jQuery.fn.extend = function() {

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

		target = arguments[0] || {}, //               

		i = 1,

		length = arguments.length,

		deep = false;



	// Handle a deep copy situation

	//      bool                  

	if ( typeof target === "boolean" ) {

		deep = target;

		target = arguments[1] || {};

		// skip the boolean and the target

		i = 2;

	}



	// Handle case when target is a string or something (possible in deep copy)

	//           

	if ( typeof target !== "object" && !jQuery.isFunction(target) ) {

		target = {};

	}



	// extend jQuery itself if only one argument is passed

	if ( length === i ) {

	//   !!   $.extend ,this    jQuery   ,                ,

	//    $.fn.extend     jQuery.fn ,           ,                 this,   this    jQuery     

		target = this;

		--i;//  i,          

	}

	//        ,       jQuery,             ,       ,      jQuery  

	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

				if ( target === copy ) {

					continue;

				}



				// Recurse if we're merging plain objects or arrays

				//               ,           (                   )

				//  jQuery                  ,     isPlainObject,isArray     extend   jQuery  。

				if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {

					if ( copyIsArray ) {

						copyIsArray = false;

						clone = src && jQuery.isArray(src) ? src : []; //



					} else {

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

					}



					// Never move original objects, clone them

					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;

};


기본적으로 extend 방법은 이렇습니다.
그래, 내가 게으른 것을 감안하여 오늘은 여기까지 분석하고 매일 조금씩 공부하고 매일 조금씩 진보하자~

좋은 웹페이지 즐겨찾기