最近花了一些時間看了一下jQuery的源碼，以下部分是我對源碼的核心部分進行的提取。這樣能更清晰的看清jQuery本身的結(jié)構(gòu)，接下來對這段核心的代碼進行詳細的分析。只限于對目前對jQuery的理解層次。 

創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站設計、做網(wǎng)站與策劃設計,克拉瑪依網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設十余年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:克拉瑪依等地區(qū)。克拉瑪依做網(wǎng)站價格咨詢:18980820575

1.首先jQuery同樣被包裹在一個匿名塊里面，接著對這個匿名塊進行了調(diào)用，

并且傳遞的參數(shù)為window，可能還包括undefined，在這部分暫不做分析。

之所以傳遞window進入到匿名塊中，是為了接下來核心代碼形成的閉包，

減少了對作用域鏈層次的查詢。這樣在jQuery的內(nèi)部中訪問window會更快些。

 

2.接下來定義一個匿名函數(shù)并對其進行調(diào)用，這個匿名函數(shù)有一個返回值就是jQuery對象

隨后將返回值（jQuery對象）賦值給變量jQuery（代碼的3行和23行）。

注意：這個函數(shù)只會執(zhí)行一次，這是jQuery設計巧妙地方之一。

最后在window上定義兩個屬性$和jQuery，其值也就是剛剛通過匿名函數(shù)的返回值jQuery。

這也是一般庫的做法，這樣$和jQuery就會存在于全局上下文的變量對象中。在程序的任何地方都可以訪問到。

 

3.代碼中（5-22行）才是真正的jQuery對象的核心。在jQuery匿名塊的內(nèi)部定義了一個構(gòu)造函數(shù)名字也叫jQuery。

所有的jQuery對象都是通過這個構(gòu)造方法構(gòu)造的。這個方法非常簡單，接收一個參數(shù)也就是選擇器的名字，new一個

jQuery.fn.init對象并且返回。這樣我們就會得到一個符合當前選擇器的jQuery對象。

 

4.代碼中（9-18行）是jQuery的原型，一切的巧妙設計都在這里。

首先拋去jQuery.fn不看，那這很簡單就是jQuery構(gòu)造函數(shù)的原型。constructor有指回了jQuery的構(gòu)造函數(shù)。

原型里面有一個方法init，兩個屬性length、splice。那這幾個東西到底有什么用呢？

首先init方法其實就是根據(jù)我們提供的選擇器進行DOM查詢最終并返回的過程，這里暫不細講。

當一個ECMA對象擁有l(wèi)ength、splice兩個屬性時，這個對象就會成為一個數(shù)組，因為ECMA中數(shù)組也是對象。

好，在處理完jQuery構(gòu)造函數(shù)的原型后，又在jQuery構(gòu)造函數(shù)（對象）上定義了一個屬性fn也就是jQuery.fn。

最后將jQuery構(gòu)造函數(shù)的原型的引用賦值給了jQuery.fn，這其實是對原型的一次緩存，以免以后頻繁使用原型。

方便實現(xiàn)插件機制。

 

5.進行到現(xiàn)在你可能會發(fā)現(xiàn)一個問題，為什么每次調(diào)用jQuery無論選擇器是什么，都會得到一些相同的方法呢？

也就是說當使用$('#demo')時，首先給jQuery的構(gòu)造函數(shù)傳遞'#demo'，然后new一個jQuery.fn.init也就是

jQuery構(gòu)造函數(shù)原型里面的方法，最后得到一個DOM對象的引用，但這時這個對象是不具備length、splice屬性的

也就是說不具備其它jQuery方法的。--當然這里我沒有寫。到底是什么原因改變了這一切使其具備了呢？

代碼（20行）jQuery構(gòu)造函數(shù)的原型的引用又賦值給了init的原型，這樣通過init函數(shù)new出來的對象也就具備了

jQuery構(gòu)造函數(shù)的原型上的所有屬性。這真是一種巧妙的設計。

 

總結(jié)：

好了現(xiàn)在總結(jié)一下整個jQuery實現(xiàn)的流程，比如當我們使用$('#demo')時，會進入jQuery的構(gòu)造方法，但是并沒用

通過這個方法去new一個實例。而是通過new一個jQuery構(gòu)造函數(shù)原型里面的init構(gòu)造方法的實例，這個方法做了一件事

就是查找DOM元素并返回。而通過將jQuery構(gòu)造函數(shù)的原型的引用賦值給這個init構(gòu)造函數(shù)的原型。是這個剛剛構(gòu)造出來

的這個實例擁有所有的jQuery屬性、方法。那么，每次根據(jù)選擇器調(diào)用jQuery的時候，都只是查找并返回一個實例而已，

而其屬性和方法早已通過原型機制獲得了。

當前文章：jQuery源碼-核心
新聞來源：http://chinadenli.net/article40/iijdho.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、外貿(mào)建站、關(guān)鍵詞優(yōu)化、企業(yè)網(wǎng)站制作、面包屑導航、App設計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)