今天，更新有點(diǎn)晚，

但是干貨不怕晚，

接著昨天講得講，

把第一段講的沒(méi)講完的繼續(xù)講解。

(function(){

? ? ? ? (21?,?94)?定義了一些變量和函數(shù)?jQuery?=?function(){};

? ? ? ? (96?,?283)?給JQ對(duì)象，添加一些方法和屬性

? ? ? ? (285?,?347)?extend?:?JQ的繼承方法

? ? ? ? (349?,?817)?jQuery.extend() :?擴(kuò)展一些工具方法

????????(877?,?2856) ?Sizzle?:?復(fù)雜選擇器的實(shí)現(xiàn)

? ? ? ? (2880?,?3042)?Callbacks?:?回調(diào)對(duì)象?:?對(duì)函數(shù)的統(tǒng)一管理

? ? ? ? (3043?,?3183)?Deferred?:?延遲對(duì)象?:?對(duì)異步的統(tǒng)一管理

? ? ? ? (3184?,?3295)?support?:?功能檢測(cè)

? ? ? ? (3308?,?3652)?data() :?數(shù)據(jù)緩存

? ? ? ? (3653?,?3797)?queue() :?隊(duì)列方法?:?執(zhí)行順序的管理

? ? ? ? (3803?,?4299)?attr()?prop()?val()?addClass()等?:?對(duì)元素屬性的操作

? ? ? ? (4300?,?5128)?on()?trigger() :?事件操作的相關(guān)方法

? ? ? ? (5140?,?6057)?DOM操作?:?添加?刪除?獲取?包裝?DOM篩選

? ? ? ? (6058?,?6620)?css() :?樣式的操作

? ? ? ? (6621?,?7854)?提交的數(shù)據(jù)和ajax() :?ajax()?load()?getJSON()

? ? ? ? (7855?,?8584)?animate() :?運(yùn)動(dòng)的方法

? ? ? ??(8585?,?8792)?offset() :?位置和尺寸的方法

? ? ? ??(8804?,?8821)?JQ支持模塊化的模式

? ? ? ? (8826) ?window.jQuery?=?window.$?=?jQuery;

? ? })();

接下來(lái)，我們看到32-35行這一塊，

// Use the correct document accordingly with window argument (sandbox)

????location?=?window.location,

????document?=?window.document,

????docElem?=?document.documentElement,

它是把window下的一些進(jìn)行變量存儲(chǔ)，

比如location啊，documentElement啊變量存儲(chǔ)，

就是說(shuō)不存儲(chǔ)的話(huà)，平時(shí)就可以這么去用，

我們打開(kāi)壓縮版本可以看到，

這里的這個(gè)i就是window.location，

這樣有利于版本的壓縮，對(duì)壓縮很有意義，

前面的location和document就不講了，

這個(gè)docElem是document，

其實(shí)document就是頁(yè)面節(jié)點(diǎn)當(dāng)中的HTML標(biāo)簽，

就是用來(lái)存一下它，在下邊都會(huì)有用的。

然后，繼續(xù)看下邊兩句話(huà)，

????// Map over jQuery in case of overwrite

????_jQuery?=?window.jQuery,

????// Map over the $ in case of overwrite

????_$?=?window.$,

其實(shí)這兩句話(huà)的意思就是：
它是和我們防止沖突，有一定關(guān)系的，

jQuery中防止沖突就會(huì)用到這兩個(gè)變量，

好，等到咱們講到防沖突的時(shí)候，

再給大家詳細(xì)講解它倆，

現(xiàn)在，我先簡(jiǎn)單的說(shuō)一說(shuō)，

比如說(shuō)我們?cè)谑褂?span>jQuery的時(shí)候，

<!-- 先引入jQuery文件 -->

<script?src="jquery-2.0.3.js"></script>

<script>

????// ?jQuery對(duì)外聽(tīng)供的接口

????// #() 和 jQuery() 這兩個(gè)方法

</script>

這個(gè)$ 其實(shí)是jQuery的一個(gè)簡(jiǎn)寫(xiě)方式，

?尤其是這個(gè)$,在很多庫(kù)當(dāng)中都會(huì)使用到它，

這時(shí)候就會(huì)出現(xiàn)沖突，

比如說(shuō)其他庫(kù)中，也有一個(gè)$,比如說(shuō)：

<script>

? ? ? ? ? ?var?$?=?10;

</script>

<!-- 先引入jQuery文件 -->

<script src="jquery-2.0.3.js"></script>

這個(gè)$ 就會(huì)影響到jQuery，

它有個(gè)防沖突的方法，

就是利用那兩個(gè)變量才能避免，

如果說(shuō)代碼是這么寫(xiě)的話(huà)，

先走上面，再走下面嗎，

走到下面的時(shí)候，

這時(shí)候的window.$存的就是10，

如果沒(méi)這兩個(gè)變量這會(huì)兒存的就是undefined，

這會(huì)上面根本不存在這 兩個(gè)東西，

跟沖突有關(guān)的，到時(shí)講到這個(gè)方法的時(shí)候，

防沖突的方法在擴(kuò)展工具方法哪里涉及到的，

到那個(gè)時(shí)候咱們?cè)賮?lái)詳細(xì)地講解。

咱們接著往下面看，

????// [[Class]] -> type pairs

?????class2type = {},

這里定義了一個(gè)空的對(duì)象字面量，

我們先看它的名字，class2type這個(gè)是跟類(lèi)型有關(guān)的，

這個(gè)變量在jQuery當(dāng)中去使用$.type()的工具方法，

判斷每個(gè)變量和元素的類(lèi)型所用到的這個(gè)變量，

它最終會(huì)成為什么樣的呢？咱們的類(lèi)型判斷，

class2type = {'[Object String]':'string','[Object Array]':'array'}

這里面會(huì)存成這樣一個(gè)形式，

其實(shí)這一塊都是用于類(lèi)型判斷的，

那到咱們講類(lèi)型判斷的時(shí)候再來(lái)詳細(xì)地講解，

所以說(shuō)為什么是class2type，

因?yàn)檫@里是兩個(gè)字符串格式。

我們繼續(xù)看到下面，

????// List of deleted data cache ids, so we can reuse them

????core_deletedIds = [ ],

????core_version = "2.0.3",

在這里肯定跟數(shù)組有關(guān)的，

我們也能看得出來(lái)，

定義了一個(gè)空數(shù)組，

根據(jù)這個(gè)注釋?zhuān)覀円材芸吹贸鰜?lái)，

這里是跟緩存數(shù)據(jù)有關(guān)的，

其實(shí)，這個(gè)變量里面有個(gè)deletedIds,

就是刪除id的意思，

這個(gè)在之前的版本確實(shí)和刪除Id有關(guān)的，

但是在這2.0.3的版本中，

這個(gè)時(shí)候，這數(shù)據(jù)存儲(chǔ)的方法就沒(méi)有用了，

改成了面向?qū)ο蟮膶?xiě)法了，

所以說(shuō)用不上刪除id的方式了，

所以，這咱只是知道一下就行了。

接著，咱們?cè)賮?lái)往下看，

// Save a reference to some core methods

????core_concat = core_deletedIds.concat,

????core_push = core_deletedIds.push,

????core_slice = core_deletedIds.slice,

????core_indexOf = core_deletedIds.indexOf,

????core_toString = class2type.toString,

????core_hasOwn = class2type.hasOwnProperty,

????core_trim = core_version.trim,

這里是把常用的數(shù)組啊、對(duì)象字面量啊、

字符串下面這些方法進(jìn)行了局部變量的存儲(chǔ)，

可以很方便地在后面使用，對(duì)于壓縮很有幫助。

上邊的之前也講過(guò)，我們來(lái)說(shuō)說(shuō)最后這個(gè)，

這個(gè)trim是去掉字符串的前后空格，

在之前老版本的瀏覽器下這個(gè)方法是沒(méi)有的，

我們只能用正則去寫(xiě)，才能去掉前后空格，

在高級(jí)瀏覽器中是有的，我們可以直接拿來(lái)用，

所以，我們簡(jiǎn)單地來(lái)看一下怎么拿來(lái)用，

// 比如，我們?cè)谶@里先寫(xiě)個(gè)字符串

// 在前后加一些空格

// 我可以在兩邊加一個(gè)小括號(hào)，才能看出空格

alert('('+' ? 1111 ? '+')')

結(jié)果如下：

很明顯能看出前后空格，

如果說(shuō)直接在字符串內(nèi)調(diào)用trim方法，

alert('('+' ? 1111 ? '.trim()+')')

結(jié)果如下：

是不是，就去掉了前后的空格，

所以在高級(jí)瀏覽器下，

咱們可以直接調(diào)用這個(gè)方法。

下邊呢，我們看到了jQuery這個(gè)函數(shù)，

// Define a local copy of jQuery

????jQuery = function( selector, context ) {

????????// The jQuery object is actually just the init constructor 'enhanced'

????????return new jQuery.fn.init( selector, context, rootjQuery );

????},

前面我們總結(jié)框架結(jié)構(gòu)的時(shí)候給大家說(shuō)過(guò)，

這個(gè)jQuery函數(shù)就是對(duì)外提供的方法接口，

通過(guò)掛在到window上，

可以在閉包外面進(jìn)行查找，

前面，我們也說(shuō)過(guò)，

這個(gè)函數(shù)執(zhí)行過(guò)后會(huì)返回的是對(duì)象，

返回對(duì)象的時(shí)候，

這個(gè)對(duì)象后邊才能節(jié)對(duì)象所擁有的方法，

為什么這個(gè)構(gòu)造函數(shù)不用其他的，

卻還是用jQuery相關(guān)的，

我們看下下面的源碼，

// 96行

jQuery.fn = jQuery.prototype = {

這里可以看出，fn就是jQuery的原型，

咱們先來(lái)說(shuō)說(shuō)普通寫(xiě)面向?qū)ο蟮姆椒ǎ?/span>

// 比如，我們?cè)谶@里先寫(xiě)個(gè)字符串

// 在前后加一些空格

// 我可以在兩邊加一個(gè)小括號(hào)，才能看出空格

// alert('('+' ? 1111 ? '.trim()+')')

// 先寫(xiě)個(gè)構(gòu)造函數(shù)

? ? ?function Aaa(){

};

// 然后在這個(gè)構(gòu)造函數(shù)下面添加原型

// 一般我們都會(huì)寫(xiě)一個(gè)初始化的方法

// 讓程序調(diào)用的時(shí)候就可以執(zhí)行了

? ? Aaa.prototype.init = function(){

};

// 然后添加下原型下的其它方法

? ? ?Aaa.prototype.css = function(){

};

// 咱們?cè)谙旅鎛ew一個(gè)構(gòu)造函數(shù)

// 就能創(chuàng)建一個(gè)出一個(gè)對(duì)應(yīng)的對(duì)象

? ? var a1 = new Aaa();

// 創(chuàng)建好這個(gè)對(duì)象之后

// 有初始化方法，我們就要先初始化一下

// 這個(gè)代碼就執(zhí)行了

? ? a1.init();

// 執(zhí)行過(guò)后，就能通過(guò)a1來(lái)調(diào)用css方法或其它的方法

? ? a1.css();

大體上，面對(duì)對(duì)象就是這樣的，

但在jQuery當(dāng)中沒(méi)有這樣，

它是這樣做的，

// 比如說(shuō)還是先寫(xiě)一個(gè)構(gòu)造函數(shù)

function jQuery(){

????????????return new ?jQuery.prototype.init();

};

jQuery.prototype.init = function(){

};

jQuery.prototype.css = function(){

};

// jQuery是這樣調(diào)用的

????jQuery().css();

當(dāng)調(diào)用的時(shí)候，

return后的那句話(huà)就會(huì)執(zhí)行，

這句話(huà)一執(zhí)行，這個(gè)函數(shù)就會(huì)執(zhí)行，

這個(gè)函數(shù)一執(zhí)行，就說(shuō)明初始化方法就調(diào)用了，

在jQuery中你這樣去調(diào)用后，

就不需要初始化的步驟了，

而且直接返回的是對(duì)象，

就說(shuō)明直接調(diào)用是不是就創(chuàng)建出來(lái)這個(gè)a1了呀，

這個(gè)對(duì)象就能擁有css的方法了，

所以說(shuō)看一下jQuery，

就很方便的解決了之前的這種繁瑣的操作，

一目了然就能找到css，

細(xì)心的小伙伴會(huì)發(fā)現(xiàn)，

我這里說(shuō)的好像有問(wèn)題，

它怎么能找到css方法的呢？

這個(gè)確實(shí)光這么去寫(xiě)是有問(wèn)題的，

其實(shí)在jQuery當(dāng)中我們可以找到這句話(huà)，

// 283行

// Give the init function the jQuery prototype for later instantiation

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

注意這里的fn就是原型，

如果把這句話(huà)加到里面，

// 比如說(shuō)還是先寫(xiě)一個(gè)構(gòu)造函數(shù)

function?jQuery(){

????????????return?new??jQuery.prototype.init();

};

jQuery.prototype.init?=?function(){

};

jQuery.prototype.css?=?function(){

};

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

// jQuery是這樣調(diào)用的

????jQuery().css();

這樣就可以了，對(duì)吧！

因?yàn)?，是把這個(gè)jQuery原型

賦給這個(gè)構(gòu)造函數(shù)初始化下邊的原型，

那就形成了一個(gè)對(duì)象的引用，

所以說(shuō)把一個(gè)對(duì)象賦給另一個(gè)對(duì)象的話(huà)，

這樣的話(huà)就出現(xiàn)了一個(gè)對(duì)象的引用的關(guān)系，

我們?cè)诤竺婊蚯懊娴臉?gòu)造函數(shù)原型上進(jìn)行修改的話(huà)，

其實(shí)是一樣的，對(duì)吧！

這就是jQuery中的一個(gè)設(shè)計(jì)方式。

就可以形成這樣的調(diào)用方式。

下邊是很多正則，

????// Used for matching numbers

????core_pnum = /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,

首先的這個(gè)正則的作用是去找匹配數(shù)字的，

包括正負(fù)數(shù)、帶不帶小數(shù)點(diǎn)，

而且還包括科學(xué)計(jì)數(shù)法，比如很大的一個(gè)數(shù)字，

可以通過(guò)科學(xué)計(jì)數(shù)法去表示，

這個(gè)正則會(huì)在后面使用，到時(shí)咱們?cè)僬f(shuō)。

????// Used for splitting on whitespace

????core_rnotwhite = /\S+/g,

這個(gè)正則是匹配單詞的有關(guān)的，

去找元素沒(méi)有空格分隔開(kāi)的。

// A simple way to check for HTML strings

????// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)

????// Strict HTML recognition (#11290: must start with <)

????rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,

這個(gè)正則前面在或之前匹配的是一個(gè)標(biāo)簽，

比如，我們創(chuàng)建標(biāo)簽的時(shí)候會(huì)用到這個(gè)正則，

后面這一塊是匹配id的形式，

我們可以看它的注釋?zhuān)?/span>

它是防止xss注入，

通過(guò)location的hash值，

我們都知道XSS是注入木馬的一種方式，

比如輸入框留言板有漏洞，

他可以輸入一段木馬程序，

你一點(diǎn)擊就上傳或者就執(zhí)行了，

這時(shí)候是非常危險(xiǎn)的，

比如我們?nèi)プ?span>hash值改變的時(shí)候，

有可能會(huì)遇到類(lèi)似的問(wèn)題。

????// Matches dashed string for camelizing

????rmsPrefix = /^-ms-/,

????rdashAlpha = /-([\da-z])/gi,

我們看第一個(gè)ms是什么意思，

這是IE的一個(gè)前綴，

它除了匹配字母也能匹配數(shù)字，

比如說(shuō) -2d就可以轉(zhuǎn)成2d，

這都是跟CSS3有關(guān)的，

這一塊，我沒(méi)有講的特別詳細(xì)，

如果對(duì)正則有不熟悉的，

可以看我之前發(fā)的正則的內(nèi)容進(jìn)行學(xué)習(xí)。

OK,咱們這段暫時(shí)講到這里！

回看上一集：

原文中此處為鏈接，暫不支持采集

別走開(kāi)，下集更精彩。

喜歡文章的小伙伴，

希望大家多多轉(zhuǎn)發(fā)分享，

你的分享就是我的動(dòng)力！