2018-5-31 周周
jquery是一個輕量級的JS框架，這點相信大部分人都聽過，而jquery之所以有這樣一個稱呼，就是因為它悄悄披了一件外衣，將自己給隱藏了起來。
/以下截取自jquery源碼片段
(function( window, undefined ) {
/* 源碼內(nèi)容 */
})( window );
上面這一小段代碼來自于1.9.0當中jquery的源碼，它是一個無污染的JS插件的標準寫法，專業(yè)名詞叫閉包?？梢园阉唵蔚目醋鍪且粋€函數(shù)，與普通函數(shù)不同的是，這個函數(shù)沒有名字，而且會立即執(zhí)行，就像下面這樣，會直接彈出字符串。
(function( window, undefined ) {
alert("Hello World!");
})( window );
可以看出來這樣寫的直接效果，就相當于我們直接彈出一個字符串。但是不同的是，我們將里面的變量變成了局域變量，這不僅可以提高運行速度，更重要的是我們在引用jquery的JS文件時，不會因為jquery當中的變量太多，而與其它的JS框架的變量命名產(chǎn)生沖突。對于這一點，我們拿以下這一小段代碼來說明。
var temp = "Hello World!";
(function( window, undefined ) {
var temp = "ByeBye World!";
})( window );
alert(temp);
這段代碼的運行結(jié)果是Hello而不是ByeBye，也就是說閉包中的變量聲明沒有污染到外面的全局變量，倘若我們?nèi)サ糸]包，則最終的結(jié)果會是ByeBye，就像下面這樣。
var temp = "Hello World!";
// (function( window, undefined ) {
var temp = "ByeBye World!";
// })( window );
alert(temp);
由此就可以看出來，jquery的外衣就是這一層閉包，它是很重要的一個內(nèi)容，是編寫JS框架必須知道的知識，它可以幫助我們隱藏我們的臨時變量，降低污染。
剛才我們說了，jquery將自己聲明的變量全部都用外衣遮蓋起來了，而我們平時使用的Jquery和$，卻是真真實實的全局變量，這個是從何而來，謎底就在jquery的某一行代碼，一般是在文件的末尾。
window.jQuery = window.$ = jQuery;
這一句話將我們在閉包當中定義的jQuery對象導出為全局變量jQuery和$，因此我們才可以在外部直接使用jQuery和$。window是默認的JS上下文環(huán)境，因此將對象綁定到window上面，就相當于變成了傳統(tǒng)意義上的全局變量，就像下面這一小段代碼的效果一樣。
var temp = "Hello World!";
(function( window, undefined ) {
var temp = "ByeBye World!";
window.temp = temp;
})( window );
alert(temp);
很明顯，它的結(jié)果應該是ByeBye，而不是Hello。因為我們在閉包中導出了temp局部變量為全局變量，從而覆蓋了第一行聲明的全局變量temp。
jquery最核心的功能，就是選擇器。而選擇器簡單理解的話，其實就是在DOM文檔中，尋找一個DOM對象的工具。
首先我們進入jquery源碼中，可以很容易的找到jquery對象的聲明，看過以后會發(fā)現(xiàn)，原來我們的jquery對象就是init對象。
jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}
jQuery.fn = jQuery.prototype;
jQuery.fn.init.prototype = jQuery.fn;
這兩句話，第一句把jQuery對象的原型賦給了fn屬性，第二句把jQuery對象的原型又賦給了init對象的原型。也就是說，init對象和jQuery具有相同的原型，因此我們在上面返回的init對象，就與jQuery對象有一樣的屬性和方法。
很多時候，我們在jQuery和DOM對象之間切換時需要用到[0]這個屬性。從截圖也可以看出，jQuery對象其實主要就是把原生的DOM對象存在了[0]的位置，并給它加了一系列簡便的方法。這個索引0的屬性我們可以從一小段代碼簡單的看一下它的由來，下面是init方法中的一小段對DOMElement對象作為選擇器的源碼。
// Handle $(DOMElement)
if ( selector.nodeType ) {
/* 可以看到，這里將DOM對象賦給了jQuery對象的[0]這個位置 */
this.context = this[0] = selector;
this.length = 1;
return this;
}
這一小段代碼可以在jquery源碼中找到，它是處理傳入的選擇參數(shù)是一個DOM對象的情況?？梢钥吹剑锩婧苊黠@的將jQuery對象索引0的位置以及context屬性，都賦予了DOM對象。代碼不僅說明了這一點，也同時說明了，我們使用$(DOMElement)可以將一個DOM對象轉(zhuǎn)換為jQuery對象，從而通過轉(zhuǎn)換獲得jQuery對象的簡便方法。
藍藍設(shè)計的小編 http://www.73404.com.cn