jquery構造器的實現代碼小結

顯然，能做到這一步，其實現是相當的複雜，這個實現就是它的init方法，jQuery的真實構造器。它功能也隨著版本的升級而升級，越來越長。
2009-01-13發布的1.3版
複製代碼 代碼如下:
init: function( selector, context ) {
// Make sure that a selection was provided
selector = selector || document;
// 處理節點參數,直接添加屬性到新執行個體上
if ( selector.nodeType ) {
this[0] = selector;
this.length = 1;
this.context = selector;
return this;
}
// 處理字串參數
if ( typeof selector === "string" ) {
// 判定是否為HTML片斷還是ID
var match = quickExpr.exec( selector );
if ( match && (match[1] || !context) ) {
// 如果是HTML片斷,轉換一個由節點構造的數組
if ( match[1] )
selector = jQuery.clean( [ match[1] ], context );
// 如果是ID,則尋找此元素,如果找到放進空數組中
else {
var elem = document.getElementById( match[3] );
// Make sure an element was located
if ( elem ){
// 處理 IE and Opera 混淆ID與NAME的bug
if ( elem.id != match[3] )
return jQuery().find( selector );
var ret = jQuery( elem );
ret.context = document;
ret.selector = selector;
return ret;
}
selector = [];
}
} else
//使用Sizzle處理其他CSS運算式,產生執行個體並返回
return jQuery( context ).find( selector );
// 處理函數參數，直接domReady
} else if ( jQuery.isFunction( selector ) )
return jQuery( document ).ready( selector );
//處理jQuery對象參數，簡單地將其兩個屬性賦給新執行個體
if ( selector.selector && selector.context ) {
this.selector = selector.selector;
this.context = selector.context;
}
//將上面得到節點數組，用setArray方法把它們變成執行個體的元素
return this.setArray(jQuery.makeArray(selector));
},

2009-02-19發布的1.32版
複製代碼 代碼如下:
init: function( selector, context ) {
// Make sure that a selection was provided
selector = selector || document;
// 處理節點參數,直接添加屬性到新執行個體上
if ( selector.nodeType ) {
this[0] = selector;
this.length = 1;
this.context = selector;
return this;
}
//處理字串參數
if ( typeof selector === "string" ) {
//判定是否為HTML片斷還是ID
var match = quickExpr.exec( selector );
if ( match && (match[1] || !context) ) {
// 如果是HTML片斷,轉換一個由節點構造的數組
if ( match[1] )
selector = jQuery.clean( [ match[1] ], context );
else {
var elem = document.getElementById( match[3] );
// 如果是ID,則尋找此元素,如果找到放進空數組中
if ( elem && elem.id != match[3] )
return jQuery().find( selector );
//這裡對1.3版做了些最佳化,更簡潔
var ret = jQuery( elem || [] );
ret.context = document;
ret.selector = selector;
return ret;
}
} else
//使用Sizzle處理其他CSS運算式,產生執行個體並返回
return jQuery( context ).find( selector );
// 處理函數參數，進行domReady操作
} else if ( jQuery.isFunction( selector ) )
return jQuery( document ).ready( selector );
//處理jQuery對象參數，簡單地將其兩個屬性賦給新執行個體
if ( selector.selector && selector.context ) {
this.selector = selector.selector;
this.context = selector.context;
}
//這裡對1.3版做了些擴充,允許傳珍上元素集合(HTMLCollection)與節點集合(NodeList),
//元素數組可能是我們用字串轉換過來的,也可以是使用者直接傳進來的
return this.setArray(jQuery.isArray( selector ) ? selector : jQuery.makeArray(selector));
},

2010-01-13發布的1.4版
複製代碼 代碼如下:
init: function( selector, context ) {
var match, elem, ret, doc;
//處理空白字串,null,undefined參數(新增),返回一個非常純淨的執行個體
if ( !selector ) {
return this;
}
// 處理節點參數,直接添加屬性到新執行個體上
if ( selector.nodeType ) {
this.context = this[0] = selector;//寫法上最佳化
this.length = 1;
return this;
}
//處理字串參數
if ( typeof selector === "string" ) {
// 判定是否為HTML片斷還是ID
match = quickExpr.exec( selector );
if ( match && (match[1] || !context) ) {
//如果是HTML片斷
if ( match[1] ) {
//取得文檔對象
doc = (context ? context.ownerDocument || context : document);
// 如果是單個標籤,直接使用 document.createElement建立此節點並放入數組中
ret = rsingleTag.exec( selector );
if ( ret ) {
//如果後面跟著一個純淨的JS對象,則為此節點添加相應的屬性或樣式
if ( jQuery.isPlainObject( context ) ) {
selector = [ document.createElement( ret[1] ) ];
jQuery.fn.attr.call( selector, context, true );
} else {
selector = [ doc.createElement( ret[1] ) ];
}
} else {
//改由buildFragment來產生節點集合(NodeList)
ret = buildFragment( [ match[1] ], [ doc ] );
selector = (ret.cacheable ? ret.fragment.cloneNode(true) : ret.fragment).childNodes;
}
} else {
// 如果是ID,則尋找此元素,如果找到放進空數組中
elem = document.getElementById( match[2] );
if ( elem ) {
// 處理 IE and Opera 混淆ID與NAME的bug
if ( elem.id !== match[2] ) {
return rootjQuery.find( selector );
}
//這裡也做了一些最佳化,原來是很傻地再產生一個jQuery執行個體
this.length = 1;
this[0] = elem;
}
this.context = document;
this.selector = selector;
return this;
}
// 如果字元是很簡單的標籤選取器,那基本沒有必要走Sizzle路線,直接getElementsByTagName,很好的最佳化
} else if ( !context && /^\w+$/.test( selector ) ) {
this.selector = selector;
this.context = document;
selector = document.getElementsByTagName( selector );
// 如果第二個參數不存在或者是jQuery對象,那麼用它或rootjQuery調用find尋找目標節點(走Sizzle路線)
} else if ( !context || context.jquery ) {
return (context || rootjQuery).find( selector );
// HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
} else {
//如果第二個參數已指定為某元素節點,轉為jQuery對象,走Sizzle路線
return jQuery( context ).find( selector );
}
// 處理函數參數，直接domReady
} else if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}
//處理jQuery對象參數，簡單地將其兩個屬性賦給新執行個體
if (selector.selector !== undefined) {
this.selector = selector.selector;
this.context = selector.context;
}
//這裡又做了些許修改,緣於makeArray可以接受第二個參數(可以是數組或類數組,這時相當合併作業)
return jQuery.isArray( selector ) ?
this.setArray( selector ) ://內部用push方法,迅速將一個普通對象變成類數組對象
jQuery.makeArray( selector, this );
},

接著是廣受歡迎的2010-02-13發布的1.42版
複製代碼 代碼如下:
init: function( selector, context ) {
var match, elem, ret, doc;
// 處理空白字串,null,undefined參數
if ( !selector ) {
return this;
}
// 處理節點參數
if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
return this;
}
// 處理body參數(新增)
if ( selector === "body" && !context ) {
this.context = document;
this[0] = document.body;
this.selector = "body";
this.length = 1;
return this;
}
// 處理字串參數,分七種情形：
//①單個標籤,帶對象屬性包 ---> jQuery.merge
//②單個標籤,不帶對象屬性包 ---> attr + jQuery.merge
//③複雜的HTML片斷 ---> buildFragment + jQuery.merge
//④ID選取器,與找到的元素的ID不同 ---> getElementById + Sizzle + pushStack
//⑤ID選取器,與找到的元素的ID相同 ---> getElementById + 簡單屬性添加
//⑥標籤選取器 ---> getElementsByTagName + jQuery.merge
//⑦其他CSS運算式 ---> Sizzle + pushStack
if ( typeof selector === "string" ) {
match = quickExpr.exec( selector );
if ( match && (match[1] || !context) ) {
if ( match[1] ) {
doc = (context ? context.ownerDocument || context : document);
ret = rsingleTag.exec( selector );
if ( ret ) {
if ( jQuery.isPlainObject( context ) ) {
selector = [ document.createElement( ret[1] ) ];
jQuery.fn.attr.call( selector, context, true );
} else {
selector = [ doc.createElement( ret[1] ) ];
}
} else {
ret = buildFragment( [ match[1] ], [ doc ] );
selector = (ret.cacheable ? ret.fragment.cloneNode(true) : ret.fragment).childNodes;
}
return jQuery.merge( this, selector );
} else {
elem = document.getElementById( match[2] );
if ( elem ) {
if ( elem.id !== match[2] ) {
return rootjQuery.find( selector );
}
this.length = 1;
this[0] = elem;
}
this.context = document;
this.selector = selector;
return this;
}
} else if ( !context && /^\w+$/.test( selector ) ) {
this.selector = selector;
this.context = document;
selector = document.getElementsByTagName( selector );
return jQuery.merge( this, selector );
} else if ( !context || context.jquery ) {
return (context || rootjQuery).find( selector );
} else {
return jQuery( context ).find( selector );
}
// 處理函數參數，直接domReady
} else if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}
//處理jQuery對象參數
if (selector.selector !== undefined) {
this.selector = selector.selector;
this.context = selector.context;
}
//無論是數組還是類數組（如NodeList），統統使用jQuery.makeArray來為執行個體添加新的元素
return jQuery.makeArray( selector, this );
},

另附上makeArray方法與merge方法，merge方法好神奇啊，
複製代碼 代碼如下:
makeArray: function( array, results ) {
var ret = results || [];
if ( array != null ) {
// The window, strings (and functions) also have 'length'
// The extra typeof function check is to prevent crashes
// in Safari 2 (See: #3039)
if ( array.length == null || typeof array === "string" || jQuery.isFunction(array) || (typeof array !== "function" && array.setInterval) ) {
push.call( ret, array );
} else {
jQuery.merge( ret, array );
}
}
return ret;
},
merge: function( first, second ) {
var i = first.length, j = 0;
if ( typeof second.length === "number" ) {
for ( var l = second.length; j < l; j++ ) {
first[ i++ ] = second[ j ];
}
} else {
while ( second[j] !== undefined ) {
first[ i++ ] = second[ j++ ];
}
}
first.length = i;
return first;
},

2011-01-23發布的1.5版，其init方法與1.42的變化不大：只有兩處做了改動：
複製代碼 代碼如下:
//1.42
- ret = buildFragment( [ match[1] ], [ doc ] );
- selector = (ret.cacheable ? ret.fragment.cloneNode(true) : ret.fragment).childNodes;
//1.5
+ ret = jQuery.buildFragment( [ match[1] ], [ doc ] );
+ selector = (ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment).childNodes;
//1.42
- return jQuery( context ).find( selector );
//1.5
+ return this.constructor( context ).find( selector );//目的就是為了不再產生新執行個體

2011-05-02發布的jquery1.6，變化不大，只是對HTML片斷進行了更嚴密的判定：
複製代碼 代碼如下:
// Are we dealing with HTML string or an ID?
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 );
}

總體來說,jQuery的構造器已經做得非常之完美,基本上達到“改無可改”的地步了。但是要保證其高效運作，我們還需要一點選取器的知識與瞭解buildFragment方法的運作，因為這兩個實在太常用了，但也是最耗效能的。