發(fā)布日期：2017/5/13

百度權(quán)重查詢 詞庫(kù)網(wǎng) 網(wǎng)站監(jiān)控 服務(wù)器監(jiān)控 seo監(jiān)控 手機(jī)游戲 iPhone游戲

引言

好近LZ還在消化系統(tǒng)原理的第三章，因此這部分內(nèi)容LZ打算再沉淀一下再寫。本次筆者和各位來(lái)討論一點(diǎn)前端的內(nèi)容，其實(shí)有關(guān)jquery，在很久之前，LZ就寫過(guò)一篇簡(jiǎn)單的源碼分析。只不過(guò)當(dāng)時(shí)剛開(kāi)始寫博客，寫的相對(duì)來(lái)講比較隨意，直接就把源碼給貼上來(lái)了，盡管加了許多注釋，但照舊會(huì)略顯粗糙。

這次LZ再次執(zhí)筆，預(yù)備稍微規(guī)范一點(diǎn)的探討一下jquery的相關(guān)內(nèi)容。

jquery的外套

jquery是一個(gè)輕量級(jí)的JS框架，這點(diǎn)相信大部分人都聽(tīng)過(guò)，而jquery之所以有這樣一個(gè)稱呼，就是因?yàn)樗�靜靜披了一件外套，將自己給隱藏了起來(lái)。

//以下截取自jquery源碼片段(function( window, undefined ) { /* 源碼內(nèi)容 */})( window );

上面這一小段代碼來(lái)自于1.9.0當(dāng)中jquery的源碼，它是一個(gè)無(wú)污染的JS插件的標(biāo)準(zhǔn)寫法，專業(yè)名詞叫閉包。可以把它簡(jiǎn)單的看做是一個(gè)函數(shù)，與通俗函數(shù)不同的是，這個(gè)函數(shù)沒(méi)有名字，而且會(huì)立即執(zhí)行，就像下面這樣，會(huì)直接彈出字符串。

(function( window, undefined ) { alert("Hello World!"); })( window );

可以看出來(lái)這樣寫的直接效果，就相當(dāng)于我們直接彈出一個(gè)字符串。但是不同的是，我們將里面的變量變成下場(chǎng)域變量，這不僅可以提高運(yùn)行速度，更主要的是我們?cè)谝�用jquery的JS文件時(shí)，不會(huì)因?yàn)閖query當(dāng)中的變量太多，而與其它的JS框架的變量命名產(chǎn)生沖突。對(duì)于這一點(diǎn)，我們拿以下這一小段代碼來(lái)說(shuō)明。

var temp = "Hello World!"; (function( window, undefined ) { var temp = "ByeBye World!"; })( window ); alert(temp);

這段代碼的運(yùn)行效果是Hello而不是ByeBye，也就是說(shuō)閉包中的變量聲明沒(méi)有污染到外面的全局變量，倘使我們?nèi)サ糸]包，則好終的效果會(huì)是ByeBye，就像下面這樣。

var temp = "Hello World!";// (function( window, undefined ) { var temp = "ByeBye World!";// })( window ); alert(temp);

由此就可以看出來(lái)，jquery的外套就是這一層閉包，它是很主要的一個(gè)內(nèi)容，是編寫JS框架必須知道的知識(shí)，它可以幫助我們隱藏我們的一時(shí)變量，降低污染。

jquery的背心

剛才我們說(shuō)了，jquery將自己聲明的變量悉數(shù)都用外套隱瞞起來(lái)了，而我們平時(shí)使用的Jquery和$，卻是真真實(shí)實(shí)的全局變量，這個(gè)是從何而來(lái)，謎底就在jquery的某一行代碼，一般是在文件的末尾。

window.jQuery = window.$ = jQuery;

這一句話將我們?cè)陂]包當(dāng)中定義的jQuery對(duì)象導(dǎo)出為全局變量jQuery和$，因此我們才可以在外部直接使用jQuery和$。window是默認(rèn)的JS上下文環(huán)境，因此將對(duì)象綁定到window上面，就相當(dāng)于變成了傳統(tǒng)意義上的全局變量，就像下面這一小段代碼的效果一樣。

var temp = "Hello World!"; (function( window, undefined ) { var temp = "ByeBye World!"; window.temp = temp; })( window ); alert(temp);

很顯明，它的效果應(yīng)該是ByeBye，而不是Hello。因?yàn)槲覀冊(cè)陂]包中導(dǎo)出了temp局部變量為全局變量，從而覆蓋了行聲明的全局變量temp。可以看出，就是通過(guò)導(dǎo)出的體例，jquery露出了自己的小背心。

jquery的內(nèi)褲

內(nèi)褲珍愛(ài)的是我們的核心器官，因此特別很是主要。那么jquery的內(nèi)褲也一樣，也是好核心的功能，就是選擇器。而選擇器簡(jiǎn)單理解的話，其實(shí)就是在DOM文檔中，尋找一個(gè)DOM對(duì)象的工具。

首先我們進(jìn)入jquery源碼中，可以很容易的找到j(luò)query對(duì)象的聲明，看過(guò)以后會(huì)發(fā)現(xiàn)，原來(lái)我們的jquery對(duì)象就是init對(duì)象。

jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); }

這里出現(xiàn)了jQuery.fn這樣一個(gè)東西，它的由來(lái)可以在jquery的源碼中找到，它其實(shí)代表的就是jQuery對(duì)象的原型。

jQuery.fn = jQuery.prototype;jQuery.fn.init.prototype = jQuery.fn;

這兩句話，句把jQuery對(duì)象的原型賦給了fn屬性，第二句把jQuery對(duì)象的原型又賦給了init對(duì)象的原型。也就是說(shuō)，init對(duì)象和jQuery具有相同的原型，因此我們?cè)谏厦娣祷氐膇nit對(duì)象，就與jQuery對(duì)象有一樣的屬性和方法。

1 2 3 下一頁(yè)