淺談jQuery構(gòu)造函數(shù)分析
在我的上一篇文章里面 闡述了jQuery的大致框架,知道了所有代碼都是寫(xiě)在了一個(gè)自調(diào)用匿名函數(shù)里面,并且傳入了window對(duì)象,源碼是這樣的:
(function( window, undefined ) {...})( window );
我們通過(guò)alert(jquery) 知道它是一個(gè)對(duì)象,那么這個(gè)對(duì)象是怎么構(gòu)造出來(lái)的呢?我們使用$(document)類(lèi)似的寫(xiě)法獲取元素,就好像直接調(diào)用了普通的方法一樣,jQuery就是普通的函數(shù)嗎?如果是構(gòu)造函數(shù)為什么不是 new $(document)的常見(jiàn)形式呢?
其實(shí)jQuery是面向?qū)ο骿s庫(kù),也有構(gòu)造函數(shù),每次調(diào)用jQuery方法是就會(huì)實(shí)例化一個(gè)jQeury對(duì)象,但是jQuery的寫(xiě)法卻非常高明。
首先先談?wù)刯s面向?qū)ο螅?nbsp; js雖然不是面向?qū)ο蟮恼Z(yǔ)言,卻又很多面向?qū)ο蟮膶?xiě)法,這里推薦大家看一下圖靈的《javascript高級(jí)程序設(shè)計(jì)》中的面向?qū)ο蟮某绦蛟O(shè)計(jì)部分。在眾多方法中比較常使用的寫(xiě)法是構(gòu)造加原型方式,下面舉例:
var Person=function(name,age){
this.name=name;
this.age=age;
}
Person.prototype={
constructor:Person,
init:function(msg){
this.say(msg);
},
say:function(msg){
alert(this.name+'說(shuō)'+msg);
}
};
var tom=new Person('tom',23);
tom.init('你好');// tom說(shuō)你好
其實(shí)jQuery也是采用的這種方式只不過(guò)用了更聰明的寫(xiě)法,一起再看看jQuery的構(gòu)造函數(shù)有什么不同
// Define a local copy of jQuery
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},
從源碼中可以看到在jQuery真正的函數(shù)是init方法,當(dāng)我們調(diào)用jQuery時(shí)會(huì)返回new init()的結(jié)果而不直接new jQuery() .
jQuery.fn是啥呢,在后面我們會(huì)看到這樣一句代碼
jQuery.fn = jQuery.prototype = {...
這樣就很好理解了,其實(shí)jQuery.fn就是原型對(duì)象也就是說(shuō)在jQuery原型里面有一個(gè)init方法,這個(gè)方法是真正的構(gòu)造函數(shù)。這樣寫(xiě)的好處就是不需要在寫(xiě)$().init()這樣的操作,直接就初始化了,但是還有一個(gè)問(wèn)題就是既然init才是構(gòu)造函數(shù)那我們寫(xiě)在jQuery上面的那么方法實(shí)例不是不能調(diào)用嗎?init的實(shí)例化自然只能調(diào)用init的方法啦,往后看到這樣一句代碼
// Give the init function the jQuery prototype for later instantiation jQuery.fn.init.prototype = jQuery.fn;
之前講過(guò)jQuery.fn=jQuery.protype,這就意味著jQuery的原型對(duì)象賦給了init的原型,這樣jQuery的原型方法自然init也就都有了,通過(guò)這樣構(gòu)造方式S使得使用jQuery方法非常簡(jiǎn)單既不需要new jQuery()的操作也不需要手動(dòng)初始化就行調(diào)用普通函數(shù)一樣簡(jiǎn)單。
相關(guān)文章
jQuery實(shí)現(xiàn)按鈕只點(diǎn)擊一次后就取消點(diǎn)擊事件綁定的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)按鈕只點(diǎn)擊一次后就取消點(diǎn)擊事件綁定的方法,可實(shí)現(xiàn)點(diǎn)擊按鈕后取消onclick事件綁定的功能,需要的朋友可以參考下2015-06-06
jquery checkbox 勾選的bug問(wèn)題解決方案與分析
本文首先由一個(gè)在項(xiàng)目中遇到的jquery checkbox 勾選的bug的解決方案,引申出jQuery中attr()和prop()的差異分析,非常的實(shí)用,需要的小伙伴快來(lái)研究下吧2014-11-11
使用jQuery實(shí)現(xiàn)input數(shù)值增量和減量的方法
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)input數(shù)值增量和減量的方法,實(shí)例分析了Bootstrap TouchSpin插件的用法,是非常實(shí)用的技巧,需要的朋友可以參考下2015-01-01
jQuery時(shí)間驗(yàn)證和轉(zhuǎn)換為標(biāo)準(zhǔn)格式的時(shí)間格式
本篇文章主要介紹了jQuery時(shí)間驗(yàn)證和轉(zhuǎn)換為標(biāo)準(zhǔn)格式的時(shí)間示例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-03-03
jquery showModelDialog的使用方法示例詳解
這篇文章主要介紹了window.showModalDialog的使用方法,大家要以參考使用2013-11-11
jQuery的live()方法對(duì)hover事件的處理示例
一個(gè)模仿懸停事件的方法,當(dāng)鼠標(biāo)移動(dòng)到一個(gè)匹配的元素上面時(shí),會(huì)觸發(fā)指定的第一個(gè)函數(shù)2014-02-02
checkbox 選中一個(gè)另一個(gè)checkbox也會(huì)選中的實(shí)現(xiàn)代碼
本文給大家?guī)?lái)了checkbox選擇器之checkbox 選中一個(gè)另一個(gè)checkbox也會(huì)選中的實(shí)現(xiàn)代碼 ,非常不錯(cuò),有需要的可以參考下2016-07-07
利用jquery正則表達(dá)式在頁(yè)面驗(yàn)證url網(wǎng)址輸入是否正確
這篇文章主要介紹了關(guān)于利用jquery正則表達(dá)式在頁(yè)面驗(yàn)證url網(wǎng)址輸入是否正確的相關(guān)資料,文中給出了完整的示例代碼,對(duì)大家具有一定的參考價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-04-04
jquery分頁(yè)插件jpaginate在IE中不兼容問(wèn)題
這篇文章主要介紹了jquery分頁(yè)插件jpaginate不兼容ie的問(wèn)題,需要的朋友可以參考下2014-04-04

