jquery構造器的實現

jquery的$符號非常神奇，它可以接受乙個字元，也可以接受乙個文件物件或window物件，亦可以傳個函式進行變為domready載入器。顯然，能做到這一步，其實現是相當的複雜，這個實現就是它的init方法，jquery的真實構造器。它功能也隨著版本的公升級而公升級，越來越長。

2009-01-13發布的1.3版

init: function( selector, context ) 

// 處理字串引數
if ( typeof selector === "string" ) 
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 ) 
//將上面得到節點陣列，用setarray方法把它們變成例項的元素
return this.setarray(jquery.makearray(selector));
},

init: function( selector, context ) 

//處理字串引數
if ( typeof selector === "string" ) 
} 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 ) 
//這裡對1.3版做了些擴充套件,允許傳珍上元素集合(htmlcollection)與節點集合(nodelist),
//元素陣列可能是我們用字串轉換過來的,也可以是使用者直接傳進來的
return this.setarray(jquery.isarray( selector ) ? selector : jquery.makearray(selector));
},

init: function( selector, context ) 

// 處理節點引數,直接新增屬性到新例項上
if ( selector.nodetype ) 
//處理字串引數
if ( typeof selector === "string" ) else 
} else 
} else 
//這裡也做了一些優化,原來是很傻地再生成乙個jquery例項
this.length = 1;
this[0] = elem;
}this.context = document;
this.selector = selector;
return this;
}// 如果字元是很簡單的標籤選擇器,那基本沒有必要走sizzle路線,直接getelementsbytagname,很好的優化
} else if ( !context && /^\w+$/.test( selector ) ) else if ( !context || context.jquery ) else 
// 處理函式引數，直接domready
} else if ( jquery.isfunction( selector ) ) 
//處理jquery物件引數，簡單地將其兩個屬性賦給新例項
if (selector.selector !== undefined) 
//這裡又做了些許修改,緣於makearray可以接受第二個引數(可以是陣列或類陣列,這時相當合併操作)
return jquery.isarray( selector ) ?
this.setarray( selector ) ://內部用push方法,迅速將乙個普通物件變成類陣列物件
jquery.makearray( selector, this );
},

init: function( selector, context ) 

// 處理節點引數
if ( selector.nodetype ) 
// 處理body引數(新增)
if ( selector === "body" && !context ) 
// 處理字串引數,分七種情形：
//①單個標籤,帶物件屬性包 ---> 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" ) else 
} else 
return jquery.merge( this, selector );
} else 
this.length = 1;
this[0] = elem;
}this.context = document;
this.selector = selector;
return this;
}} else if ( !context && /^\w+$/.test( selector ) ) else if ( !context || context.jquery ) else 
// 處理函式引數，直接domready
} else if ( jquery.isfunction( selector ) ) 
//處理jquery物件引數
if (selector.selector !== undefined) 
//無論是陣列還是類陣列（如nodelist），統統使用jquery.makearray來為例項新增新的元素
return jquery.makearray( selector, this );
},

makearray: function( array, results )  else 

} return ret;
}, merge: function( first, second ) 
} else 
} first.length = i;
return first;
},

- ret = buildfragment( [ match[1] ], [ doc ] );
- selector = (ret.cacheable ? ret.fragment.clonenode(true) : ret.fragment).childnodes;
+ ret = jquery.buildfragment( [ match[1] ], [ doc ] );
+ selector = (ret.cacheable ? jquery.clone(ret.fragment) : ret.fragment).childnodes;
- return jquery( context ).find( selector );
+ return this.constructor( context ).find( selector );//目的就是為了不再生成新例項

// are we dealing with html string or an id?

if ( selector.charat(0) === "" && selector.length >= 3 ) else

jquery學習2 關於jquery構造器

構造器是jquery框架的核心，其有jquery 函式來實現 也可簡寫為 所以一般情況下使用後者 此函式是jquery的核心，jquery的一切操作都會構建在這個函式之上。注意 使用jquery 這種格式的時候，jquery這個單詞要寫對，就q需要大寫，其他要小寫，錯乙個字母都不可以。jquery ...

jQuery的9中建構函式

接受乙個字串，其中包含了用於匹配元素集合的 css 選擇器 jquery selector,context 傳入單個 dom jquery element 傳入 dom 陣列 jquery elementarray 傳入 js 物件 jquery object 傳入 jquery 物件 jquery...

前端 jQuery選擇器 的實現原理

今天三七互娛技術面試的時候面試官問了我這個問題，當時一臉懵逼，於是好好總結一下。當我們使用jquery選擇器的時候，s 回預設去執行jquery內部封裝好的乙個init的建構函式 每次申明乙個jquery物件的時候，返回的是jquery.prototype.init物件。這個init不是jquery...