前言

雖然JQuery相對簡單，但要全面掌握，且快速靈活的使用它也并不那么容易，它提供了很多方法，包含了網(wǎng)頁開發(fā)的各個知識面，所以要全面掌握這些知識點(diǎn)，個人認(rèn)為還是需要對jquery有深入的理解，對這些知識點(diǎn)做分類整理記憶，這樣你才能面對一些JQuery代碼的時候不會感到迷惑，才會知道采用何種方式實(shí)現(xiàn)某個特效是最佳實(shí)踐，才能快速的采用JQuery來進(jìn)行項(xiàng)目開發(fā)。

jQuery中最常用方法的就是jQuery( ) ，也即$( ) 。

jQuery( )是一個函數(shù)調(diào)用，調(diào)用的結(jié)果是返回了一個jQuery實(shí)例對象。

編寫組件通常的做法是將組件封裝成一個對象，需要用的時候則通過new運(yùn)算符來創(chuàng)建一個實(shí)例。但是jQuery( )無須我們用new手工實(shí)例化，它會自動返回一個實(shí)例。

要實(shí)現(xiàn)這一點(diǎn)，最直接的思路就是定義這樣一個函數(shù)：

這么做的問題是出現(xiàn)了死循環(huán)：

最簡單的解決辦法是借助另一個構(gòu)造函數(shù)：

這么做技術(shù)上并沒有什么問題，但是jQuery的作者并沒有這么做，可能是出于某種技術(shù)潔癖或者我暫時不清楚的原因，init被定義在了jQuery函數(shù)的原型中：

通過init作為中轉(zhuǎn)站，最終return出了一個jQuery實(shí)例。看上去更“雅致”，更有“技術(shù)范”。

將上述代碼寫在一個自執(zhí)行函數(shù)內(nèi)（形成私有作用域，避免命名空間污染），就構(gòu)成了jQuery的核心框架（簡化版）：

要理解上述結(jié)構(gòu)的工作原理，必須理解JavaScript基于構(gòu)造函數(shù)和原型的繼承模式。

當(dāng)函數(shù)調(diào)用表達(dá)式前出現(xiàn)了關(guān)鍵字new，這個函數(shù)就成了構(gòu)造函數(shù)，此時會依次發(fā)生四件事：

     1、首先一個空對象（又稱實(shí)例）被創(chuàng)建出來了。

     2、該空對象繼承構(gòu)造函數(shù)的原型中的屬性和方法。這也是為什么要把方法都寫在構(gòu)造函數(shù)的prototype里。

     3、該空對象被賦值給構(gòu)造函數(shù)內(nèi)部的this對象。

     4、執(zhí)行構(gòu)造函數(shù)。如果構(gòu)造函數(shù)中顯式的返回了一個對象，那么new出的就不再是新創(chuàng)建的空對象，而是return指定的對象。否則一律返回新建空對象。

具體參見阮一峰教程：http://javascript.ruanyifeng.com/oop/basic.html

于是jQuery( )的構(gòu)造原理就很清晰了：每次調(diào)用jQuery( )都返回由構(gòu)造函數(shù)init指定返回的this對象，而this對象已經(jīng)被賦值為那個新創(chuàng)建的空對象。由于把jQuery.prototype都賦給了init.prototype，所以新創(chuàng)建的空對象繼承所有jQuery的方法。

構(gòu)造函數(shù)init里面的return this其實(shí)刪掉也無妨，至于作者為啥要加這句，呃，可能是因?yàn)橹赖奶唷?/p>

總結(jié)

以上就是jQuery()方法構(gòu)建原理的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

最新評論