jQuery源碼學習筆記：jQuery.fn.init(selector,context,rootjQuery)代碼詳解

3.1 源碼

init: function( selector, context, rootjQuery ) {
		var match, elem, ret, doc;

		// Handle $(""), $(null), or $(undefined)
        //如果selector爲空格，！selector爲false
		if (!selector) {
            //此時this爲空jQuery對象
			return this;
		}

		// Handle $(DOMElement)
        //nodeType節點類型，利用是否有nodeType屬性來判斷是否是DOM元素
		if ( selector.nodeType ) {
            //將第一個元素和屬性context指向selector
			this.context = this[0] = selector;
			this.length = 1;
			return this;
		}

		// The body element only exists once, optimize finding it
        //因爲body只出現一次，利用!context進行優化
		if ( selector === "body" && !context && document.body ) {
            //context指向document對象
			this.context = document;
			this[0] = document.body;
			this.selector = selector;
			this.length = 1;
			return this;
		}

		// Handle HTML strings
		if ( typeof selector === "string" ) {
		    // Are we dealing with HTML string or an ID?
            //以<開頭以>結尾，且長度大於等於3，這裏假設是HTML片段，跳過queckExpr正則檢查
			if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
				// Assume that strings that start and end with <> are HTML and skip the regex check
				match = [ null, selector, null ];

			} else {
				match = quickExpr.exec( selector );
			}

			// Verify a match, and that no context was specified for #id
			if ( match && (match[1] || !context) ) {

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

					// If a single string is passed in and it's a single tag
					// just do a createElement and skip the rest
					ret = rsingleTag.exec( selector );
                    //如果是單獨標籤
					if (ret) {
                        //如果context是普通對象
					    if (jQuery.isPlainObject(context)) {
                            //之所以放在數組中，是方便後面的jQuery.merge()方法調用
						    selector = [document.createElement(ret[1])];
                            //調用attr方法，傳入參數context
							jQuery.fn.attr.call( selector, context, true );

						} else {
							selector = [ doc.createElement( ret[1] ) ];
						}

                    //複雜HTML的處理方法
					} else {
						ret = jQuery.buildFragment( [ match[1] ], [ doc ] );
						selector = ( ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment ).childNodes;
					}

					return jQuery.merge( this, selector );

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

					// Check parentNode to catch when Blackberry 4.6 returns
					// nodes that are no longer in the document #6963
					if ( elem && elem.parentNode ) {
						// Handle the case where IE and Opera return items
					    // by name instead of ID

					    //即使是documen.getElementById這樣核心的方法也要考慮到瀏覽器兼容問題，可能找到的是name而不是id
						if ( elem.id !== match[2] ) {
							return rootjQuery.find( selector );
						}

						// Otherwise, we inject the element directly into the jQuery object
						this.length = 1;
						this[0] = elem;
					}

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

			// HANDLE: $(expr, $(...))
            //沒有指定上下文，執行rootjQuery.find()，制定了上下文且上下文是jQuery對象，執行context.find()
			} else if ( !context || context.jquery ) {
				return ( context || rootjQuery ).find( selector );

			// HANDLE: $(expr, context)
			// (which is just equivalent to: $(context).find(expr)

            //如果指定了上下文，且上下文不是jQuery對象
			} else {
                //先創建一個包含context的jQuery對象，然後調用find方法
				return this.constructor( context ).find( selector );
			}

		// HANDLE: $(function)
		// Shortcut for document ready
		} else if ( jQuery.isFunction( selector ) ) {
			return rootjQuery.ready( selector );
		}
        //selector是jquery對象
		if ( selector.selector !== undefined ) {
			this.selector = selector.selector;
			this.context = selector.context;
		}
        //合併到當前jQuery對象
		return jQuery.makeArray( selector, this );
	},

其中裏面調用的其他jQuery函數待後面再詳細學習。

1、其中用到了兩個正則表達式：

（1）quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/;

解釋：?:是非捕獲組的意思，非捕獲組只參與匹配，但不會把匹配到的內容捕獲到組裏，降低了內存的佔用。

[^#<]*匹配除#<以外的任意字符，且出現0次或多次

(<[\w\W]+>):

\w表示匹配字母數字、下劃線，\W正好相反，這裏匹配的是以字母數字下劃線作爲第一個字母的一個標籤，比如<div>

[^>]*匹配除>之外的所有字符，且出現0次或多次，$結束，表示結束時不能爲>字符

#(\w\-]*)$  #id的匹配，id只能爲字母、數字、下劃線和減號

（2）rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;

解釋：^<(\w+)\s*\/?>：

^<：以<開頭

(\w+)：匹配的字母、數字、下劃線

\s*：匹配空格符0次或多次，比如可以匹配<div  >這樣的

\/?>：匹配/符號0次或1次，比如匹配<img    />這樣的

(?:<\/\1>)：\1表示的是前面的()，這裏指的就是(\w+)，比如前面是<div>，這裏就要是</div>

最後的?$表示的是此元素爲截止符，要麼截止在</div>，要麼沒有就是前面的<img >或者是<img />

到此就把所有的單獨的標籤的情況考慮完全了。

學以致用

<script type="text/javascript">
        var quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/;
        var rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;

        var match = quickExpr.exec("abc<div>#id");
        if (match) {
            alert(RegExp.$1)
        }

        var match1 = rsingleTag.exec("<div></div>");
        if (match1) {
            alert(RegExp.$1);
        }
    </script>