2018-5-31 周周
jquery是一個(gè)輕量級(jí)的JS框架,這點(diǎn)相信大部分人都聽過,而jquery之所以有這樣一個(gè)稱呼,就是因?yàn)樗那呐艘患庖?,將自己給隱藏了起來。
/以下截取自jquery源碼片段
(function( window, undefined ) {
/* 源碼內(nèi)容 */
})( window );
上面這一小段代碼來自于1.9.0當(dāng)中jquery的源碼,它是一個(gè)無污染的JS插件的標(biāo)準(zhǔn)寫法,專業(yè)名詞叫閉包。可以把它簡(jiǎn)單的看做是一個(gè)函數(shù),與普通函數(shù)不同的是,這個(gè)函數(shù)沒有名字,而且會(huì)立即執(zhí)行,就像下面這樣,會(huì)直接彈出字符串。
(function( window, undefined ) {
alert("Hello World!");
})( window );
可以看出來這樣寫的直接效果,就相當(dāng)于我們直接彈出一個(gè)字符串。但是不同的是,我們將里面的變量變成了局域變量,這不僅可以提高運(yùn)行速度,更重要的是我們?cè)谝胘query的JS文件時(shí),不會(huì)因?yàn)閖query當(dāng)中的變量太多,而與其它的JS框架的變量命名產(chǎn)生沖突。對(duì)于這一點(diǎn),我們拿以下這一小段代碼來說明。
var temp = "Hello World!";
(function( window, undefined ) {
var temp = "ByeBye World!";
})( window );
alert(temp);
這段代碼的運(yùn)行結(jié)果是Hello而不是ByeBye,也就是說閉包中的變量聲明沒有污染到外面的全局變量,倘若我們?nèi)サ糸]包,則最終的結(jié)果會(huì)是ByeBye,就像下面這樣。
var temp = "Hello World!";
// (function( window, undefined ) {
var temp = "ByeBye World!";
// })( window );
alert(temp);
由此就可以看出來,jquery的外衣就是這一層閉包,它是很重要的一個(gè)內(nèi)容,是編寫JS框架必須知道的知識(shí),它可以幫助我們隱藏我們的臨時(shí)變量,降低污染。
剛才我們說了,jquery將自己聲明的變量全部都用外衣遮蓋起來了,而我們平時(shí)使用的Jquery和$,卻是真真實(shí)實(shí)的全局變量,這個(gè)是從何而來,謎底就在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);
很明顯,它的結(jié)果應(yīng)該是ByeBye,而不是Hello。因?yàn)槲覀冊(cè)陂]包中導(dǎo)出了temp局部變量為全局變量,從而覆蓋了第一行聲明的全局變量temp。
jquery最核心的功能,就是選擇器。而選擇器簡(jiǎn)單理解的話,其實(shí)就是在DOM文檔中,尋找一個(gè)DOM對(duì)象的工具。
首先我們進(jìn)入jquery源碼中,可以很容易的找到j(luò)query對(duì)象的聲明,看過以后會(huì)發(fā)現(xiàn),原來我們的jquery對(duì)象就是init對(duì)象。
jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}
jQuery.fn = jQuery.prototype;
jQuery.fn.init.prototype = jQuery.fn;
這兩句話,第一句把jQuery對(duì)象的原型賦給了fn屬性,第二句把jQuery對(duì)象的原型又賦給了init對(duì)象的原型。也就是說,init對(duì)象和jQuery具有相同的原型,因此我們?cè)谏厦娣祷氐膇nit對(duì)象,就與jQuery對(duì)象有一樣的屬性和方法。
很多時(shí)候,我們?cè)趈Query和DOM對(duì)象之間切換時(shí)需要用到[0]這個(gè)屬性。從截圖也可以看出,jQuery對(duì)象其實(shí)主要就是把原生的DOM對(duì)象存在了[0]的位置,并給它加了一系列簡(jiǎn)便的方法。這個(gè)索引0的屬性我們可以從一小段代碼簡(jiǎn)單的看一下它的由來,下面是init方法中的一小段對(duì)DOMElement對(duì)象作為選擇器的源碼。
// Handle $(DOMElement)
if ( selector.nodeType ) {
/* 可以看到,這里將DOM對(duì)象賦給了jQuery對(duì)象的[0]這個(gè)位置 */
this.context = this[0] = selector;
this.length = 1;
return this;
}
這一小段代碼可以在jquery源碼中找到,它是處理傳入的選擇參數(shù)是一個(gè)DOM對(duì)象的情況??梢钥吹?,里面很明顯的將jQuery對(duì)象索引0的位置以及context屬性,都賦予了DOM對(duì)象。代碼不僅說明了這一點(diǎn),也同時(shí)說明了,我們使用$(DOMElement)可以將一個(gè)DOM對(duì)象轉(zhuǎn)換為jQuery對(duì)象,從而通過轉(zhuǎn)換獲得jQuery對(duì)象的簡(jiǎn)便方法。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com