jQuery源碼逐行分析學習02(第一部分：jQuery的一些變數和函數)

第一次嘗試使用Office Word，方便程度大大超過網頁線上編輯，不過初次使用，一些內容不甚熟悉，望各位大神見諒~

在上次的文章中，把整個jQuery的結構進行了梳理，得到了整個jQuery的簡化結構，如下：

 1 (function(){
 2 (21 , 94) 定義了一些變數和函數 jQuery = function(){};
 3 (96 , 283) 給JQ對象，添加一些方法和屬性
 4 (285 , 347) extend : JQ的繼承方法
 5 (349 , 817) jQuery.extend() : 擴展一些工具方法
 6 (877 , 2856) Sizzle : 複雜選擇器的實現
 7 (2880 , 3042) Callbacks : 回調對象 : 對函數的統一管理
 8 (3043 , 3183) Deferred : 延遲對象 : 對非同步的統一管理
 9 (3184 , 3295) support : 功能檢測
10 (3308 , 3652) data() : 數據緩存
11 (3653 , 3797) queue() : 隊列方法 : 執行順序的管理
12 (3803 , 4299) attr() prop() val() addClass()等 : 對元素屬性的操作
13 (4300 , 5128) on() trigger() : 事件操作的相關方法
14 (5140 , 6057) DOM操作 : 添加 刪除 獲取 包裝 DOM篩選
15 (6058 , 6620) css() : 樣式的操
16 (6621 , 7854) 提交的數據和ajax() : ajax() load() getJSON()
17 (7855 , 8584) animate() : 運動的方法
18 (8585 , 8792) offset() : 位置和尺寸的方法
19 (8804 , 8821) JQ支持模塊化的模式
20 (8826) window.jQuery = window.$ = jQuery;
21 })();

這一次，我們將開始對jQuery源碼進行逐行分解。

首先從一開始的註釋開始

開始的註釋包含了以下內容:jQuery版本,jQuery官網,sizzle官網,jQuery版權信息,軟體許可以及更新時間

接下來便開始了匿名自執行函數

1 (function(window,undefined){})(window);

先看下傳參的作用:

    window參數有兩個作用：第一，在代碼執行過程中，一些方法、屬性都是通過樹形結構聯結的，傳入window參數就相當於給程式指明瞭一個查找方向，這樣提高了程式查找的效率；第二，傳入window參數，這樣便於後期對於代碼壓縮，在壓縮過程中，window參數會變成一個壓縮程式自動生成的變數代號，這樣就便於壓縮了。

    undefined參數有一個作用：因為在這樣大體量的程式中，像undefined這樣的值很容易被篡改，所以在自執行匿名函數的參數中傳入undefined，防止在程式過程中被無意篡改。

接下來的註釋中，有關於use strict的部分，在此做一下說明：在嚴格模式下,代碼需要特別規範,稍有不規範就會報錯,建議不要使用。舉個例子：

我們正常在聲明賦值變數時，以下寫法是正確的：   

1 a=10;

但是在use strict模式下就會報錯，必須要是

1 var a=10;

又比如關於八進位數，我們一般情況下，我們可以定義八進位數：     

1  var a=010;

但是在use strict模式下，這個八進位數是不支持的，就會報錯。

接下來從(23)行開始，定義了一些變數和一些函數

　　rootjQuery:該變數表示jQuery的根目錄，在第(866)行

1 rootjQuery=jQuery(document);

定義該變數便於後期代碼的可維護

readyList:該變數和DOM載入有關，和ready(fn)相關的一個變數

core_strundefined=typeof undefined,字元串形式的undefined

在a==undefined和typeof a=='undefined'中,新版本瀏覽器沒有差別，但是老版本瀏覽器可能前者無法判別，所以在此處，採用這種雖然難寫一點但是保全的方式。

　　location=window.location;將window下的location對象單獨定義存儲

　　document=window.document;將window下的document對象單獨定義存儲

　　docElem=document.documentElement;將document.element對象單獨定義存儲

接下來

　　_jQuery=window.jQuery,

　　_$=window.$,

這兩個變數是用於防止和其他程式產生衝突的，很多程式在對外暴露介面的時候都會選擇使用$符號，這樣就難免發生衝突，此處就是解決了這樣的衝突問題。

　　class2type={}

$.type(),這是用來判斷類型的

　　core_deletedIds=[]

這個變數和緩存數據有關,一般在老版本中有用

　　core_version='2.0.3'

這個變數是該版本jQuery的版本號

　　(52,58)core_concat=...

一些核心方法的存儲，這其中包括了concat，push，slice，indexOf，toString，hasOwn，trim方法

接下來定義了jQuery函數

　　jQuery=function(){}

　　$() = jQuery()

下麵對這個結構分析一下

1 jQuery=function(selector,context){
2         return new jQuery.fn.init(selector,context,rootjQuery);
3 }

但在第(283)行，出現瞭如下代碼

1 (283)jQuery.fn.init.prototype=jQuery.fn;

jQuery.fn的初始化方法的原型就是jQuery.fn

在普通寫面向對象時     

1 function Aaa(){}
2 Aaa.prototype.init=function(){};
3 Aaa.prototype.css=function(){};

調用的時候：

var a1=new Aaa();
a1.init();
a1.css();

我們需要手動調用初始化方法，然後再去調用其他方法；

在jQuery中，面向對象是這樣的：

1  function jQuery(){
2      return new jQuery.prototype.init();
3  }
4  jQuery.prototype.init=function(){};
5  jQuery.prototype.css=function(){};
6  jQuery.prototype.init.prototype=jQuery.prototype;

調用的時候：    

1  var a2=new jQuery();
2  a2.css();

就不需要再去調用初始化方法了，初始化方法在new對象的時候就已經被調用過了。

接下來定義了一些匹配正則

　　(67)core_pnum=...這匹配數字的正則

　　core_rnotwhite=...這是匹配單詞

　　rquickExpr=...匹配防止XSS註入,防止輸入框輸入病毒的正則，類似<p>aaa 或者#div    這樣的形式

　　rsingleTag=...匹配獨立空標簽，例如<p></p>    <div></div>    這樣的形式

　　rmsPrefix=...IE瀏覽器首碼

　　rdashAlpha=...轉大小寫    -l轉成L這樣的形式

接下來

1 fcamelCase=function(all,letter){
2         return letter.toUpperCase();
3 }

轉駝峰命名法的回調函數

1 completed=function(){
2         document.removeEventListener('DOMContentLoaded',completed,false);
3         window.removeEventListener('load',completed,false);
4         jQuery.ready();
5 }

DOM載入成功之後觸發的回調函數

感謝大家百忙之中來閱讀我的博客~~

點擊下載jQuery代碼文件

上一篇傳送門：jQuery源碼逐行分析學習01(jQuery的框架結構簡化)