JQuery是一款非常優(yōu)秀的JavaScript庫(kù)歌豺，極大地提升了前端js開(kāi)發(fā)體驗(yàn)，所以最近我在看jquery的源碼心包，想把自己理解的一些內(nèi)容分享給大家类咧。
首先來(lái)看一下jQuery的總體結(jié)構(gòu)代碼1-1：
(function(window,undefined){
//構(gòu)造JQuery對(duì)象
varjQuery=(function(){
varjQuery=function(selector,context){
return newjQuery.fn.int(selector,context,rootjQuery);
}
returnjQuery;
})();
//工具方法Utilities
//回調(diào)函數(shù)列表Callbacks Object
//異步隊(duì)列Deferred Object
//瀏覽器功能測(cè)試Support
//數(shù)據(jù)緩存Data
//隊(duì)列Queue
//屬性操作Attribute
//事件系統(tǒng)Events
//選擇器Sizzle
//DOM遍歷Traversing
//DOM操作Manipulation
//樣式操作CSS（計(jì)算樣式，內(nèi)聯(lián)樣式）
//異步請(qǐng)求Ajax
//動(dòng)畫Effects
//坐標(biāo)Offset蟹腾，尺寸Dimensions
window.jQuery=window.$=jQuery;
})(window);
代碼1-1
從上面的代碼中我們可以看到j(luò)query的所有代碼都是寫在了一個(gè)立即執(zhí)行的匿名函數(shù)中痕惋，這種函數(shù)叫“自調(diào)用匿名函數(shù)”。當(dāng)瀏覽器加載了jQuery的js文件后岭佳，自調(diào)用匿名函數(shù)就會(huì)立即執(zhí)行血巍，給jQuery初始化各個(gè)模塊。
首先講一下用自調(diào)用匿名函數(shù)的優(yōu)點(diǎn)珊随，創(chuàng)建自調(diào)用匿名函數(shù)就相當(dāng)于創(chuàng)建了一個(gè)特殊的函數(shù)作用域述寡，該函數(shù)中的代碼不會(huì)和已有的同名函數(shù)柿隙、方法和變量沖突。所以jQuery的代碼不會(huì)受到其他代碼的干擾鲫凶，而且也不會(huì)污染全局變量禀崖，從而影響其他代碼。自調(diào)用匿名函數(shù)還有兩種寫法螟炫，如下：
//寫法1
(function(){
//......
}());
//寫法2
!function(){
//......
}();
代碼1-2
從代碼1-1中我們可以看到在自調(diào)用匿名函數(shù)的最后將jQuery添加到了window對(duì)象上波附，從而使得變量jQuery成為公開(kāi)的全局變量，其他部分將是私有的昼钻。給自調(diào)用匿名函數(shù)設(shè)置參數(shù)window掸屡，并傳入window對(duì)象，可以將window對(duì)象變?yōu)榫植孔兞浚ò押瘮?shù)參數(shù)作為局部變量使用）然评，這樣當(dāng)在jQuery代碼塊中訪問(wèn)window對(duì)象時(shí)仅财，不需要退回頂層作用域，可以快速的訪問(wèn)window對(duì)象碗淌。
給自調(diào)用匿名函數(shù)設(shè)置undefined盏求，因?yàn)樘厥庵祏ndefined是window對(duì)象的一個(gè)屬性，例如：
alert("undefined"inwindow);//true
執(zhí)行以上代碼將會(huì)彈出true亿眠。通過(guò)這種方式可以為確保參數(shù)undefined的值是undefined碎罚，因?yàn)閡ndefined有可能會(huì)被重寫為新的值∧上瘢可以用下面的代碼來(lái)嘗試修改undefined的值：
undefined="now is's defined";
alert(undefined);
當(dāng)然荆烈，在高版本的瀏覽器中這種寫該方法已經(jīng)不支持了，比如IE9.0以上爹耗、Chrome 17.0.963.56以上和Firefox 4.0版本都是不能改變的耙考。
通常在JavaScript中，如果語(yǔ)句分別放在不同的行潭兽，則分號(hào)（;）是可選的可寫可不寫，但是對(duì)于自調(diào)用匿名函數(shù)來(lái)說(shuō)斗遏，在之前或之后省略分號(hào)都有可能會(huì)引起語(yǔ)法錯(cuò)誤山卦。如下代碼執(zhí)行就會(huì)拋出異常：
例1
varn=1
(function(){})()
//TypeError: numberis not function
在上面的代碼中，如果自調(diào)用匿名函數(shù)的前一行末尾沒(méi)有加分號(hào)诵次，則自調(diào)用匿名函數(shù)的第一對(duì)括號(hào)會(huì)被當(dāng)作是函數(shù)調(diào)用账蓉。
例2
(function(){})()
(function(){})()
//TypeError: undefined isnot function
在上面的代碼中，如果未在第一個(gè)自調(diào)用匿名函數(shù)的末尾加分號(hào)逾一，則下一行自調(diào)用匿名函數(shù)的第一對(duì)括號(hào)會(huì)被當(dāng)作是函數(shù)的調(diào)用铸本。所以，在使用自調(diào)用匿名函數(shù)時(shí)遵堵，最好不要省略自調(diào)用匿名函數(shù)的之前和之后的分號(hào)箱玷。
jQuery對(duì)象是一個(gè)類數(shù)組對(duì)象怨规，含有連續(xù)的整型屬性、length屬性和大量的JQuery方法锡足。jQuery對(duì)象由構(gòu)造函數(shù)jQuery（）創(chuàng)建波丰，$()則是jQuery()的縮寫。如果調(diào)用構(gòu)造函數(shù)jQuery()時(shí)傳入的參數(shù)不同舶得，創(chuàng)建jQuery對(duì)象的邏輯也會(huì)隨之不同掰烟。構(gòu)造函數(shù)jQuery()有7種用法，如下圖：
這次主要是先將jQuery的總體結(jié)構(gòu)講一下沐批，其他的等下次分享纫骑。推薦大家看《深入解析jQuery架構(gòu)設(shè)計(jì)與實(shí)現(xiàn)原理》一書，關(guān)于jquery的技術(shù)點(diǎn)講的特別細(xì)九孩。
本文原創(chuàng)首發(fā)于Cobub官網(wǎng)博客惧磺，作者：姜文杰
如有轉(zhuǎn)載請(qǐng)注明作者和出處！
推薦一款開(kāi)源私有化部署的移動(dòng)應(yīng)用數(shù)據(jù)統(tǒng)計(jì)分析系統(tǒng)Cobub Razor
項(xiàng)目地址：https://github.com/cobub/razor
官網(wǎng)：www.cobub.com
開(kāi)源社區(qū)技術(shù)交流QQ群：194022996
