淺析jQuery框架與構造對象

　　這是一些分析jQuery框架的文字

　　針對jQuery 版本

　　面向的讀者應具備以下要求

　　非常熟悉HTML

　　非常熟悉javascript語法知識

　　熟悉javascript面向對象方面的知識

　　熟練使用jQuery框架

　　言歸正傳！

　　jQuery對象的初始化是寫在匿名函數裡的

　　就像這樣

　　（function（）{alert（jQuery框架分析）}）（）

　　第一個括號是聲明了一個函數第二個括號是執行這個函數也就是說jQuery框架在頁面載入的時候已經做了一些事情（這個個匿名函數已經被執行了）做的這些事情使我們可以通過$（#yourId）或$（yourClass）等方式獲取頁面元素並把獲取到的元素包裝成jQuery對象

　　匿名函數是怎麼實現這些功能的呢？

　　首先框架定義了兩個核心對象

　　jQuery = windowjQuery = window$ = function（ selector context ） {}

　　一個是jQuery

　　一個是$

　　這兩個對象都指向一個函數

　　這個函數是我們使用$（）或jQuery（）方法時的入口這個方法返回一個jQueryfninit（ selector context ）的實例其實這個實例是一個jQuery對象

　　jQuery對象是一個什麼樣的對象呢？

　　jQuery對象其實是一個javascript的數組

　　這個數組對象包含個方法和個屬性

　　個屬性分別是

　　jQuery     當前的jQuery框架版本號

　　length     指示該數組對象的元素個數

　　context    一般情況下都是指向HtmlDocument對象

　　selector   傳遞進來的選擇器內容  如#yourId或yourClass等

　　如果你通過$（#yourId）方法獲取jQuery對象並且你的頁面中只有一個id為yourId的元素那麼$（#yourId）[]就是HtmlElement元素與documentgetElementById（yourId）獲取的元素是一樣的

　　jQuery對象是怎麼構造出來的呢？

　　這個對象就是剛才我們提到的

　　jQuery = windowjQuery = window$ = function（ selector context ） {}

　　框架不只為此對象定義了一個方法還定義了它的原型（prototype）

　　jQueryjQueryfn = jQueryprototype = {//此處為json對象}

　　原型的定義是通過json對象定義的

　　如

　　{

　　init function（ selector context ） {//方法體}

　　jQuery //屬性

　　size function（） {//方法體}

　　//……

　　}

　　前面提到的個方法個屬性有一部分在這個json對象中完成定義的 這個json對象中第一個方法就是init方法也就是入口方法中的jQueryfninit（ selector context ）此方法與一個正則表達式對象配合來構造jQuery對象

　　這個正則表達式為

　　quickExpr = /^[^<]*（<（|\s）+>）[^>]*$|^#（[\w]+）$/

　　下面我們說一下init方法的實現邏輯

　　此方法有兩個參數

　　一個是selector（選擇器）

　　一個是context（上下文）

　　selector就是我們用$（#yourId）或jQuery（yourClass）傳遞進來的變量

　　這個參數不一定是字符串也可能是其他形式的變量

　　等會兒我們就會介紹到

　　context參數我們在使用jQuery的時候很少用到暫且不表

　　注意這兩個參數都在返回的jQuery對象中體現出來了（以兩個同名的屬性展示）

　　下面看一下這個方法體內部的實現邏輯

　　   //如果沒有選擇器或者選擇器為空的話就把document對象賦值給他
selector = selector || document;
//如果selector參數是dom元素直接返回jQuery對象
//也就是說你可以$(documentgetElementById(allen))把你的元素封裝成jQuery對象
if ( selectornodeType ) {
this[] = selector;
thislength = ;
ntext = selector;
return this;
}
//typeof 取對象的類型用三個等號效率較高 不需要類型轉換兩個等號默認有類型轉換
if ( typeof selector === string ) {
//這裡用到了我們前面提到的正則表達式quickExpr
//match其實是一個數組
//第個元素是與正則表達式相匹配的文本
//第個元素是與正則表達式的第個子表達式相匹配的文本（如果有的話）
//第個元素是第個子表達式相匹配的文本（如果有的話）
//第個元素是第個子表達式相匹配的文本（如果有的話）這裡就是元素的ID不包含#
var match = quickExprexec( selector );
//正則表達式匹配到了內容   並且 match[]不為空 或者 context為空
//match[]不為空的時候selector是HTML字符串也就是你可以用$(
xland
)把對象包裝成jQuery對象
//context為空的時候selector是頁面元素ID
if ( match && (match[] || !context) ) {
 //選擇器為html字符串  此情況暫且不表
if ( match[] ){
selector = jQueryclean( [ match[] ] context );}
//選擇器為ID
else {
//得到元素
var elem = documentgetElementById( match[] );
 //如果得到了這個元素但是元素的ID屬性不是match[]跳入分支分支裡面的東西做了什麼工作暫且不表
if ( elem && elemid != match[] ){
return jQuery()find( selector );}
//把得到的頁面元素封裝成jQuery對象
//如果elem為空就傳入一個空數組框架怎麼處理此空數組暫且不表
//如果不為空就跳入我們前面說的if ( selectornodeType )分支構造出jQuery對象來
var ret = jQuery( elem || [] );
 //設置jQuery對象的context屬性
ntext = document;
 //設置jQuery對象的selector屬性
retselector = selector;
 //返回這個對象給調用者
return ret;
}

　　至此

　　var obj = $（#yourId）

　　構造jQuery對象的初步工作就做完了

From:http://tw.wingwit.com/Article/program/Java/hx/201311/26677.html