$도대체 무엇입니까 - jQuery의 $기호와 init 함수를 상해합니다

본문의 모든 코드는 jQuery에서 나온 것입니다.1.5.2, 이해하기 편리하도록 유형의 개념을 도입한다. 비록 jQuery는 대상을 향한 사상을 바탕으로 하는 것은 아니지만.
jQuery는 현재 가장 유행하는 자바스크립트 프레임워크입니다. $는 그 중에서 가장 흔히 볼 수 있는 기호로 jQuery에 깊은 낙인을 남겼습니다.그러면 $는 도대체 무엇입니까? 문자를 받아들일 수도 있고, 문서의 대상을 받아들일 수도 있고, 함수를 호출할 수도 있습니다.다음에 나는 이 기호 뒤에 숨겨진 비밀을 철저히 분석할 것이다.
jQuery, 효율적이고 정련되며 특히DOM 요소의 대상 조작을 간소화하면 어느 정도에 전방 프로그래머를 쓸데없는 코드에서 해방시켜 개발 효율을 크게 높일 수 있습니다!다중 브라우저의 호환성도 프로그래머로 하여금 각종 버그의 치근거림에서 최대한 벗어나게 한다
 
$기호는 요소 선택기의 간략한 쓰기로서 최초에Prototype 라이브러리에서 사용되었고 get ElementBy Id를 간략하게 썼다. jQuery는 이 이념을 답습하고 빛을 발했고 $기호는 jQuery의 가장 독특한 특징이 되었다.그럼 jQuery에서 $기호는 도대체 무엇입니까?
jQuery에 익숙한 사람들은 거의 jQuery의 모든 작업은 $기호로부터 시작되며, 요소 선택기로서 작업 결과는 jQuery 대상으로 되돌아온다는 것을 알아야 한다.그럼 이제 jQuery류의 구조 함수의 주요 코드를 보겠습니다.

var jQuery = (function() {
	//  jQuery  ,    jQuery         ,      
	var jQuery = function( selector, context ) {
		//jQuery     ,   jQuery.fn.init  
		//    jQuery.fn.init   
		return new jQuery.fn.init( selector, context, rootjQuery );
	},

	.....

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

	......

	}

	......

	//  jQuery  ,         window.jQuery window.$  jQuery
	return (window.jQuery = window.$ = jQuery);

})();

 
상기 jQuery의 주체 구조를 보면 알 수 있듯이 첫 실행이 끝난 후에 전역 변수 $와 jQuery는 모두var jQuery=function(selector,context) {} 이 함수를 가리키고 있다. 여기서 결론을 내릴 수 있다. $는 바로 jQuery의 별명으로 실제 jQuery를 호출하는 것이다.fn.init.
다시 var jQuery=function(selector,context) {} 이 구조 함수를 보십시오. 왜 안에 jQuery의 대상을 직접 되돌려주지 않습니까?다른 방법을 쓰는 건가요?
만약에 대상을 직접 되돌려준다면 매번 jQuery 대상을 사용할 때마다 new jQuery () 를 사용해야 하기 때문에 매우 불편하다. new라는 조작을 jQuery 구조 함수에 직접 봉하여 실례화된 조작을 간소화하는 동시에 jQuery는 jQuery나 $기호를 통해 인터페이스를 통일하고 코드의 작성을 편리하게 하며 번거로움을 간소화하여 효율을 높인다.
그러면 jQuery류는 구체적으로 어떻게 구성되었습니까?각종 매개 변수 형식의 호출을 지원하여 jQuery에 직접 연결할 수 있습니다.fn.init의'원마', jQuery의 실제 구조기, 우리는 완전히 이해할 수 있다

/*            ，   jQuery      .
	*/
	init: function( selector, context, rootjQuery ) {
		var match, elem, ret, doc;

		// 1)   $(""), $(null), or $(undefined)
		//this  jQuery  
		if ( !selector ) {
			return this;
		}

		// 2)   $(DOMElement)
		//selector.nodeType   DOM  ,   DOM      jQuery     
		if ( selector.nodeType ) {
			this.context = this[0] = selector;
			this.length = 1;
			return this;
		}

		//3)body       ,     
		if ( selector === "body" && !context && document.body ) {
			this.context = document;
			this[0] = document.body;
			this.selector = "body";
			this.length = 1;
			return this;
		}

		//4)      ,     ,
		/*
		*(1)  html             ：createElement + merge
		*(2)  html            ：createElement + attr + merge
		*(3)  html    ：buildFragment + merge
		*(4)#id   context	：getElementById  getElementById + Sizzle
		*(5)#id  context ：Sizzle
		*(6)experession string ：Sizzle
		*(7)      ：Sizzle（  getElementByTagName）
		*/
		if ( typeof selector === "string" ) {
			//      HTML string    ID
			//   HTML strings  match[1]   
			//   ID strings match[1]  
			//quickExpr = /^(?:[^<]*(<[\w\W]+>)[^>]*$|#([\w\-]+)$)/,
			match = quickExpr.exec( selector );

			//       ，  #id  context  ，    $('#xxx',xxx)
			if ( match && (match[1] || !context) ) {

				//   HTML   $(html) -> $(array)
				if ( match[1] ) {
					//  context jQuery  ，        ，  context[0]
					context = context instanceof jQuery ? context[0] : context;
					//  document  
					doc = (context ? context.ownerDocument || context : document);

					//            
					ret = rsingleTag.exec( selector );
					//    
					if ( ret ) {
						//        
						//  context        ,    
						//  $('<div>', { 'id': 'test', 'class': 'test' });
						if ( jQuery.isPlainObject( context ) ) {
							selector = [ document.createElement( ret[1] ) ];
							jQuery.fn.attr.call( selector, context, true );

						} else {
						//       
						//  $('<div>')
							selector = [ doc.createElement( ret[1] ) ];
						}

					} else {
						//          ，  $('<div><a></a></div>')
						ret = jQuery.buildFragment( [ match[1] ], [ doc ] );
						selector = (ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment).childNodes;
					}
					//     selector    jQuery   
					return jQuery.merge( this, selector );

				//   $("#id"),  $("#xxx");
				} else {
					elem = document.getElementById( match[2] );

					if ( elem && elem.parentNode ) {
						//  IE Opera ID   Name    bug,  Sizzle  
						if ( elem.id !== match[2] ) {
							return rootjQuery.find( selector );
						}

						//   ，    jQuery    
						this.length = 1;
						this[0] = elem;
					}

					this.context = document;
					this.selector = selector;
					return this;
				}

			//    $(expr, $(...))，  Sizzle  ，  $("div"),$('div > a'),$('div,a'),$('div:first')
			} else if ( !context || context.jquery ) {
				return (context || rootjQuery).find( selector );

			//   : $(expr, context),  $('div a');  $('a','div')  $('div').find('a');
			} else {
				return this.constructor( context ).find( selector );
			}

		//5)  : $(function),  DOM         ,   $().ready(){foo}
		} else if ( jQuery.isFunction( selector ) ) {
			return rootjQuery.ready( selector );
		}
		//6)  ：$($(...))，    jQuery       ，   makeArray  
		if (selector.selector !== undefined)    {
			this.selector = selector.selector;
			this.context = selector.context;
		}
		//  makeArray， jQuery      ,  $([1,2]);
		return jQuery.makeArray( selector, this );
	},

 
총결산
$기호, 사실은 jQuery 클래스 구조 함수에 대한 인용입니다. 이 함수는 실제 jQuery를 호출합니다.fn.init(즉 jQuery.prototype.init)로 jQuery 대상을 생성합니다. 그 중에서 jQuery.prototype의 모든 방법은 jQuery의 대상에 의해 계승됩니다. $.func는 실제적으로 jQuery 클래스의 정적 방법이기 때문에 $는 jQuery 클래스의 구조 함수입니다. 각종 조건의 검색과 생성을 지원하고 DOM 대상이 jQuery 대상을 구성하는 동시에 하나의 클래스입니다. 모든 jQuery 정적 방법의 입구입니다. 예를 들어 하나의 $를 사용할 수 있습니다.ajax().
마지막으로 여러분께 자원을 드립니다. 14가지 jQuery 코드 개선 팁 jQuery Sizzle 선택기에 대해 관심 있는 학생은 jQuery의 Sizzle 선택기 탐색
http://blog.csdn.net/pgmsoul/article/details/8002805