jQuery源碼-核心-創(chuàng)新互聯(lián)

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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、成都微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了莊浪免費(fèi)建站歡迎大家使用！

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

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

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

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

2.接下來定義一個(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，其值也就是剛剛通過匿名函數(shù)的返回值jQuery。

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

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

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

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

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

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

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

首先init方法其實(shí)就是根據(jù)我們提供的選擇器進(jìn)行DOM查詢最終并返回的過程，這里暫不細(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è)問題，為什么每次調(diào)用jQuery無論選擇器是什么，都會(huì)得到一些相同的方法呢？

也就是說當(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屬性的

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

代碼（20行）jQuery構(gòu)造函數(shù)的原型的引用又賦值給了init的原型，這樣通過init函數(shù)new出來的對(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)造方法，但是并沒用

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

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

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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章題目：jQuery源碼-核心-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://www.muchs.cn/article6/depeog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、網(wǎng)站內(nèi)鏈、軟件開發(fā)、云服務(wù)器、企業(yè)建站、服務(wù)器托管

廣告

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