今天，更新有點晚，
但是干貨不怕晚，
接著昨天講得講，
把第一段講的沒講完的繼續(xù)講解。
(function(){
? ? ? ? (21?,?94)?定義了一些變量和函數(shù)?jQuery?=?function(){};
? ? ? ? (96?,?283)?給JQ對象，添加一些方法和屬性
? ? ? ? (285?,?347)?extend?:?JQ的繼承方法
? ? ? ? (349?,?817)?jQuery.extend() :?擴(kuò)展一些工具方法
????????(877?,?2856) ?Sizzle?:?復(fù)雜選擇器的實現(xiàn)
? ? ? ? (2880?,?3042)?Callbacks?:?回調(diào)對象?:?對函數(shù)的統(tǒng)一管理
? ? ? ? (3043?,?3183)?Deferred?:?延遲對象?:?對異步的統(tǒng)一管理
? ? ? ? (3184?,?3295)?support?:?功能檢測
? ? ? ? (3308?,?3652)?data() :?數(shù)據(jù)緩存
? ? ? ? (3653?,?3797)?queue() :?隊列方法?:?執(zhí)行順序的管理
? ? ? ? (3803?,?4299)?attr()?prop()?val()?addClass()等?:?對元素屬性的操作
? ? ? ? (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)動的方法
? ? ? ??(8585?,?8792)?offset() :?位置和尺寸的方法
? ? ? ??(8804?,?8821)?JQ支持模塊化的模式
? ? ? ? (8826) ?window.jQuery?=?window.$?=?jQuery;
? ? })();
接下來，我們看到32-35行這一塊，
// Use the correct document accordingly with window argument (sandbox)
????location?=?window.location,
????document?=?window.document,
????docElem?=?document.documentElement,
它是把window下的一些進(jìn)行變量存儲，
比如location啊，documentElement啊變量存儲，
就是說不存儲的話，平時就可以這么去用，
我們打開壓縮版本可以看到，
這里的這個i就是window.location，
這樣有利于版本的壓縮，對壓縮很有意義，
前面的location和document就不講了，
這個docElem是document，
其實document就是頁面節(jié)點當(dāng)中的HTML標(biāo)簽，
就是用來存一下它，在下邊都會有用的。
然后，繼續(xù)看下邊兩句話，
????// Map over jQuery in case of overwrite
????_jQuery?=?window.jQuery,
????// Map over the $ in case of overwrite
????_$?=?window.$,
其實這兩句話的意思就是：
它是和我們防止沖突，有一定關(guān)系的，
jQuery中防止沖突就會用到這兩個變量，
好，等到咱們講到防沖突的時候，
再給大家詳細(xì)講解它倆，
現(xiàn)在，我先簡單的說一說，
比如說我們在使用jQuery的時候，
<!-- 先引入jQuery文件 -->
<script?src="jquery-2.0.3.js"></script>
<script>
????// ?jQuery對外聽供的接口
????// #() 和 jQuery() 這兩個方法
</script>
這個$ 其實是jQuery的一個簡寫方式，
?尤其是這個$,在很多庫當(dāng)中都會使用到它，
這時候就會出現(xiàn)沖突，
比如說其他庫中，也有一個$,比如說：
<script>
? ? ? ? ? ?var?$?=?10;
</script>
<!-- 先引入jQuery文件 -->
<script src="jquery-2.0.3.js"></script>
這個$ 就會影響到jQuery，
它有個防沖突的方法，
就是利用那兩個變量才能避免，
如果說代碼是這么寫的話，
先走上面，再走下面嗎，
走到下面的時候，
這時候的window.$存的就是10，
如果沒這兩個變量這會兒存的就是undefined，
這會上面根本不存在這 兩個東西，
跟沖突有關(guān)的，到時講到這個方法的時候，
防沖突的方法在擴(kuò)展工具方法哪里涉及到的，
到那個時候咱們再來詳細(xì)地講解。
咱們接著往下面看，
????// [[Class]] -> type pairs
?????class2type = {},
這里定義了一個空的對象字面量，
我們先看它的名字，class2type這個是跟類型有關(guān)的，
這個變量在jQuery當(dāng)中去使用$.type()的工具方法，
判斷每個變量和元素的類型所用到的這個變量，
它最終會成為什么樣的呢？咱們的類型判斷，
class2type = {'[Object String]':'string','[Object Array]':'array'}
這里面會存成這樣一個形式，
其實這一塊都是用于類型判斷的，
那到咱們講類型判斷的時候再來詳細(xì)地講解，
所以說為什么是class2type，
因為這里是兩個字符串格式。
我們繼續(xù)看到下面，
????// List of deleted data cache ids, so we can reuse them
????core_deletedIds = [ ],
????core_version = "2.0.3",
在這里肯定跟數(shù)組有關(guān)的，
我們也能看得出來，
定義了一個空數(shù)組，
根據(jù)這個注釋，我們也能看得出來，
這里是跟緩存數(shù)據(jù)有關(guān)的，
其實，這個變量里面有個deletedIds,
就是刪除id的意思，
這個在之前的版本確實和刪除Id有關(guān)的，
但是在這2.0.3的版本中，
這個時候，這數(shù)據(jù)存儲的方法就沒有用了，
改成了面向?qū)ο蟮膶懛耍?br>
所以說用不上刪除id的方式了，
所以，這咱只是知道一下就行了。
接著，咱們再來往下看，
// 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ù)組啊、對象字面量啊、
字符串下面這些方法進(jìn)行了局部變量的存儲，
可以很方便地在后面使用，對于壓縮很有幫助。
上邊的之前也講過，我們來說說最后這個，
這個trim是去掉字符串的前后空格，
在之前老版本的瀏覽器下這個方法是沒有的，
我們只能用正則去寫，才能去掉前后空格，
在高級瀏覽器中是有的，我們可以直接拿來用，
所以，我們簡單地來看一下怎么拿來用，
// 比如，我們在這里先寫個字符串
// 在前后加一些空格
// 我可以在兩邊加一個小括號，才能看出空格
alert('('+' ? 1111 ? '+')')
結(jié)果如下：
很明顯能看出前后空格，
如果說直接在字符串內(nèi)調(diào)用trim方法，
alert('('+' ? 1111 ? '.trim()+')')
結(jié)果如下：
是不是，就去掉了前后的空格，
所以在高級瀏覽器下，
咱們可以直接調(diào)用這個方法。
下邊呢，我們看到了jQuery這個函數(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)的時候給大家說過，
這個jQuery函數(shù)就是對外提供的方法接口，
通過掛在到window上，
可以在閉包外面進(jìn)行查找，
前面，我們也說過，
這個函數(shù)執(zhí)行過后會返回的是對象，
返回對象的時候，
這個對象后邊才能節(jié)對象所擁有的方法，
為什么這個構(gòu)造函數(shù)不用其他的，
卻還是用jQuery相關(guān)的，
我們看下下面的源碼，
// 96行
jQuery.fn = jQuery.prototype = {
這里可以看出，fn就是jQuery的原型，
咱們先來說說普通寫面向?qū)ο蟮姆椒ǎ?/span>
// 比如，我們在這里先寫個字符串
// 在前后加一些空格
// 我可以在兩邊加一個小括號，才能看出空格
// alert('('+' ? 1111 ? '.trim()+')')
// 先寫個構(gòu)造函數(shù)
? ? ?function Aaa(){
};
// 然后在這個構(gòu)造函數(shù)下面添加原型
// 一般我們都會寫一個初始化的方法
// 讓程序調(diào)用的時候就可以執(zhí)行了
? ? Aaa.prototype.init = function(){
};
// 然后添加下原型下的其它方法
? ? ?Aaa.prototype.css = function(){
};
// 咱們在下面new一個構(gòu)造函數(shù)
// 就能創(chuàng)建一個出一個對應(yīng)的對象
? ? var a1 = new Aaa();
// 創(chuàng)建好這個對象之后
// 有初始化方法，我們就要先初始化一下
// 這個代碼就執(zhí)行了
? ? a1.init();
// 執(zhí)行過后，就能通過a1來調(diào)用css方法或其它的方法
? ? a1.css();
大體上，面對對象就是這樣的，
但在jQuery當(dāng)中沒有這樣，
它是這樣做的，
// 比如說還是先寫一個構(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)用的時候，
return后的那句話就會執(zhí)行，
這句話一執(zhí)行，這個函數(shù)就會執(zhí)行，
這個函數(shù)一執(zhí)行，就說明初始化方法就調(diào)用了，
在jQuery中你這樣去調(diào)用后，
就不需要初始化的步驟了，
而且直接返回的是對象，
就說明直接調(diào)用是不是就創(chuàng)建出來這個a1了呀，
這個對象就能擁有css的方法了，
所以說看一下jQuery，
就很方便的解決了之前的這種繁瑣的操作，
一目了然就能找到css，
細(xì)心的小伙伴會發(fā)現(xiàn)，
我這里說的好像有問題，
它怎么能找到css方法的呢？
這個確實光這么去寫是有問題的，
其實在jQuery當(dāng)中我們可以找到這句話，
// 283行
// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;
注意這里的fn就是原型，
如果把這句話加到里面，
// 比如說還是先寫一個構(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();
這樣就可以了，對吧！
因為，是把這個jQuery原型
賦給這個構(gòu)造函數(shù)初始化下邊的原型，
那就形成了一個對象的引用，
所以說把一個對象賦給另一個對象的話，
這樣的話就出現(xiàn)了一個對象的引用的關(guān)系，
我們在后面或前面的構(gòu)造函數(shù)原型上進(jìn)行修改的話，
其實是一樣的，對吧！
這就是jQuery中的一個設(shè)計方式。
就可以形成這樣的調(diào)用方式。
下邊是很多正則，
????// Used for matching numbers
????core_pnum = /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,
首先的這個正則的作用是去找匹配數(shù)字的，
包括正負(fù)數(shù)、帶不帶小數(shù)點，
而且還包括科學(xué)計數(shù)法，比如很大的一個數(shù)字，
可以通過科學(xué)計數(shù)法去表示，
這個正則會在后面使用，到時咱們再說。
????// Used for splitting on whitespace
????core_rnotwhite = /\S+/g,
這個正則是匹配單詞的有關(guān)的，
去找元素沒有空格分隔開的。
// 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-]*))$/,
這個正則前面在或之前匹配的是一個標(biāo)簽，
比如，我們創(chuàng)建標(biāo)簽的時候會用到這個正則，
后面這一塊是匹配id的形式，
我們可以看它的注釋，
它是防止xss注入，
通過location的hash值，
我們都知道XSS是注入木馬的一種方式，
比如輸入框留言板有漏洞，
他可以輸入一段木馬程序，
你一點擊就上傳或者就執(zhí)行了，
這時候是非常危險的，
比如我們?nèi)プ?span>hash值改變的時候，
有可能會遇到類似的問題。
????// Matches dashed string for camelizing
????rmsPrefix = /^-ms-/,
????rdashAlpha = /-([\da-z])/gi,
我們看第一個ms是什么意思，
這是IE的一個前綴，
它除了匹配字母也能匹配數(shù)字，
比如說 -2d就可以轉(zhuǎn)成2d，
這都是跟CSS3有關(guān)的，
這一塊，我沒有講的特別詳細(xì)，
如果對正則有不熟悉的，
可以看我之前發(fā)的正則的內(nèi)容進(jìn)行學(xué)習(xí)。
OK,咱們這段暫時講到這里！
回看上一集：
原文中此處為鏈接，暫不支持采集
別走開，下集更精彩。
喜歡文章的小伙伴，
希望大家多多轉(zhuǎn)發(fā)分享，
你的分享就是我的動力！
喜歡 分享 or