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

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

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

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

之所以傳遞window進(jìn)入到匿名塊中，是為了接下來(lái)核心代碼形成的閉包，

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

 

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

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

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

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

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

 

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

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

jQuery.fn.init對(duì)象并且返回。這樣我們就會(huì)得到一個(gè)符合當(dāng)前選擇器的jQuery對(duì)象。

 

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

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

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

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

當(dāng)一個(gè)ECMA對(duì)象擁有l(wèi)ength、splice兩個(gè)屬性時(shí)，這個(gè)對(duì)象就會(huì)成為一個(gè)數(shù)組，因?yàn)镋CMA中數(shù)組也是對(duì)象。

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

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

方便實(shí)現(xiàn)插件機(jī)制。

 

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

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

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

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

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

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

 

總結(jié)：

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

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

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

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

而其屬性和方法早已通過(guò)原型機(jī)制獲得了。

當(dāng)前文章：jQuery源碼-核心
新聞來(lái)源：http://www.ekvhdxd.cn/article40/iijdho.html

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

廣告

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