jQuery.2.0.3源碼分析01-整體架構思想

来源:https://www.cnblogs.com/yanmuxiao/archive/2018/04/01/8684473.html
-Advertisement-
Play Games

一、jQuery（$）命名空間 為了避免聲明瞭一些全局變數造成變數污染，使用立即執行函數形成jQuery($)獨立的命名空間； 二、jQuery的本質是什麼？ 由jQuery的源碼可知，jQuery的本質是一個函數（對象），是函數就應該有原型（prototype對象），但是，jQuery重置了該原型 ...


一、jQuery（$）命名空間

為了避免聲明瞭一些全局變數造成變數污染，使用立即執行函數形成jQuery($)獨立的命名空間；

(function(window, undefined){


})(window)

二、jQuery的本質是什麼？

(function(window, undefined){

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

})(window)

由jQuery的源碼可知，jQuery的本質是一個函數（對象），是函數就應該有原型（prototype對象），但是，jQuery重置了該原型（prototype對象），也就是重新賦值，同時也將原型（prototype對象）賦值到jQuery的fn屬性上，也添加了很多屬性和方法，看源碼：

(function(window, undefined){

    var jQuery = function( selector, context ) {
        return new jQuery.fn.init( selector, context, rootjQuery );
    };
    
    var core_version = "2.0.3"

    jQuery.fn = jQuery.prototype = {

             jquery: core_version, // 存放jQuewry版本
             constructor: jQuery,  // 構造函數
             init: function( selector, context, rootjQuery ) {
              
             }

    }
    
    
})(window)

 

三、jQuery對象是什麼，也就是$()返回了什麼？

我們都知道jQuery可以通過選擇器獲取DOM對象，但是jQuery返回的DOM對象和原生DOM對象（如通過document.getElementById獲取的DOM對象）是不一樣的，但是可以相互轉換，如可以通過$().get()方法或者$()[]將jQuery DOM對象轉換成原生DOM對象，也可以通過$(原生DOM對象)將原生DOM對象轉換成jQuery DOM對象。

但是jQuery對象是什麼（$()返回了什麼），如圖用原生方法和jQuery方法獲取一個id為div1的元素：

通過document.getElementsByClassName和通過$方法獲取class為div的元素：

$()返回的值為什麼是這樣的呢？其實我們可以看源碼$()的返回值也就是構造函數init的返回值：

(function(window, undefined){

    var jQuery = function( selector, context ) {
        return new jQuery.fn.init( selector, context, rootjQuery );
    };
    var core_version = "2.0.3"
    jQuery.fn = jQuery.prototype = {

             jquery: core_version, // 存放jQuewry版本
             constructor: jQuery,  // 構造函數
             init: function( selector, context, rootjQuery ) {
              
             }

    }
    
    
})(window)

返回值是執行一個函數，

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

，是jQuery原型重置後原型上的一個函數，而且通過new創建的，那麼其實$()的返回值也就是init這個函數的返回值。通過new執行的函數也就是構造函數的執行，init是一個構造函數（雖然首字母沒有大寫）,也就是說jQuery DOM對象（$()的返回值）是init構造函數的一個實例，該實例繼承了構造函數init原型（prototype對象）上的所有屬性和方法（構造函數init原型上有哪些屬性和方法呢？，這一點很重要，先賣個關子）。我們先來看一下jQuery源碼上構造函數init返回了什麼：

  1 (function(window, undefined){
  2 
  3     var jQuery = function( selector, context ) {
  4         return new jQuery.fn.init( selector, context, rootjQuery );
  5     };
  6 
  7     jQuery.fn = jQuery.prototype = {
  8 
  9              jquery: core_version, // 存放jQuewry版本
 10              constructor: jQuery,  // 構造函數
 11              init: function( selector, context, rootjQuery ) {
 12                 var match, elem;
 13 
 14         // HANDLE: $(""), $(null), $(undefined), $(false)
 15         if ( !selector ) {
 16             return this;
 17         }
 18 
 19         // Handle HTML strings
 20         if ( typeof selector === "string" ) {
 21             if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
 22                 // Assume that strings that start and end with <> are HTML and skip the regex check
 23                 match = [ null, selector, null ];
 24 
 25             } else {
 26                 match = rquickExpr.exec( selector );
 27             }
 28 
 29             // Match html or make sure no context is specified for #id
 30             if ( match && (match[1] || !context) ) {
 31 
 32                 // HANDLE: $(html) -> $(array)
 33                 if ( match[1] ) {
 34                     context = context instanceof jQuery ? context[0] : context;
 35 
 36                     // scripts is true for back-compat
 37                     jQuery.merge( this, jQuery.parseHTML(
 38                         match[1],
 39                         context && context.nodeType ? context.ownerDocument || context : document,
 40                         true
 41                     ) );
 42 
 43                     // HANDLE: $(html, props)
 44                     if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
 45                         for ( match in context ) {
 46                             // Properties of context are called as methods if possible
 47                             if ( jQuery.isFunction( this[ match ] ) ) {
 48                                 this[ match ]( context[ match ] );
 49 
 50                             // ...and otherwise set as attributes
 51                             } else {
 52                                 this.attr( match, context[ match ] );
 53                             }
 54                         }
 55                     }
 56 
 57                     return this;
 58 
 59                 // HANDLE: $(#id)
 60                 } else {
 61                     elem = document.getElementById( match[2] );
 62 
 63                     // Check parentNode to catch when Blackberry 4.6 returns
 64                     // nodes that are no longer in the document #6963
 65                     if ( elem && elem.parentNode ) {
 66                         // Inject the element directly into the jQuery object
 67                         this.length = 1;
 68                         this[0] = elem;
 69                     }
 70 
 71                     this.context = document;
 72                     this.selector = selector;
 73                     return this;
 74                 }
 75 
 76             // HANDLE: $(expr, $(...))
 77             } else if ( !context || context.jquery ) {
 78                 return ( context || rootjQuery ).find( selector );
 79 
 80             // HANDLE: $(expr, context)
 81             // (which is just equivalent to: $(context).find(expr)
 82             } else {
 83                 return this.constructor( context ).find( selector );
 84             }
 85 
 86         // HANDLE: $(DOMElement)
 87         } else if ( selector.nodeType ) {
 88             this.context = this[0] = selector;
 89             this.length = 1;
 90             return this;
 91 
 92         // HANDLE: $(function)
 93         // Shortcut for document ready
 94         } else if ( jQuery.isFunction( selector ) ) {
 95             return rootjQuery.ready( selector );
 96         }
 97 
 98         if ( selector.selector !== undefined ) {
 99             this.selector = selector.selector;
100             this.context = selector.context;
101         }
102 
103         return jQuery.makeArray( selector, this );
104              }
105 
106     }
107     
108     
109 })(window)
View Code

 源碼有點複雜，因為jQuery的選擇器功能也就是對DOM操作得功能非常的強大，我們先弱化jQuery的選擇器功能，讓jQuery只能通過id獲取DOM元素，如，改寫jQuery的源碼如下：

 1 (function(window, undefined){
 2 
 3     var jQuery = function( selector, context ) {
 4         return new jQuery.fn.init( selector, context, rootjQuery );
 5     };
 6 
 7     jQuery.fn = jQuery.prototype = {
 8 
 9          jquery: core_version, // 存放jQuewry版本
10          constructor: jQuery,  // 構造函數
11          init: function( selector, context, rootjQuery ) {
12 
13              var match, elem;
14 
15               // HANDLE: $(""), $(null), $(undefined), $(false)
16             if ( !selector ) {
17                 return this;
18             }else {
19                 elem = document.getElementById( selector.replace('#','') );
20 
21                 // Check parentNode to catch when Blackberry 4.6 returns
22                 // nodes that are no longer in the document #6963
23                 if ( elem && elem.parentNode ) {
24                     // Inject the element directly into the jQuery object
25                     this.length = 1;
26                     this[0] = elem;
27                 }
28 
29                 this.context = document;
30                 this.selector = selector;
31                 return this;
32             }
33 
34          }
35 
36     }
37     
38     
39 })(window)
View Code

由源碼可以知道，返回值是 this 。這個this指的是什麼？如果不知道可以去瞭解一下 new + 構造函數 的知識，其實通過new調用構造函數，構造函數中的this就是指向該構造函數的實例，在這裡也就是指向init構造函數的實例。看一下具體是什麼：

init其實也就是一個json對象，key值為0的value值是原生DOM對象，也就能解析為什麼可以通過$()[0]就能將JQuery對象轉換成原生DOM對象了。 init實例對象還存放了很多信息，如length、選擇器、上下文document，其實在實際的jQuery中，$()傳入的參數不同，init存放的信息也各不相同，自己可以去瞭解一下，比如上圖，$的參數為空和傳入id，init實例的數據就不同，又比如傳入class和id又有所不同。

 

儘管$方法傳入的參數不同，init實例也有所不同，但是有一點是相同的，也就是都繼承構造函數init的原型對象，如：

我們都知道，jQuery對象有很多方法，如$().attr、$().addClass、$().removeClass等等.......，這些方法哪裡來的呢，很明顯是通過繼承構造函數init原型上的，那麼構造函數init原型上為什麼有這些方法，按理來說構造函數是既然是一個函數，那麼它肯定是繼承了Object原型上的方法，但是Object原型上又沒有這些方法，哪裡來的呢？請往下看。

 

四、重置構造函數init的原型對象

 上jQuery源碼，看構造函數init的原型對象：

還有上面提過的：

也就是這樣：

 

也就是說構造函數init的實例繼承了jQuery原型上的所有屬性和方法，同時將init實例的構造函數指向jQuery（造假技術一流），如：

在所有的jQuery對象中都可以找到jQuery的版本號和構造函數，同時也能解釋為什麼jQuery對象上面會有這麼多的方法了。

五、jQuery插件機制

jQuery為開發插件提拱了兩個方法，分別是：

jQuery.fn.extend(object); 給jQuery對象添加方法。

jQuery.extend(object); 為擴展jQuery類本身.為類添加新的方法，可以理解為添加靜態方法（工具方法）。

這兩個方法都接受一個參數，類型為Object，Object對應的"名/值對"分別代表"函數或方法體/函數主體"。看源碼：

jQuery.extend = jQuery.fn.extend = function() {
    var options, name, src, copy, copyIsArray, clone,
        target = arguments[0] || {},
        i = 1,
        length = arguments.length,
        deep = false;

    // Handle a deep copy situation
    if ( typeof target === "boolean" ) {
        deep = target;
        target = arguments[1] || {};
        // skip the boolean and the target
        i = 2;
    }

    // Handle case when target is a string or something (possible in deep copy)
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
        target = {};
    }

    // extend jQuery itself if only one argument is passed
    if ( length === i ) {
        target = this;
        --i;
    }

    for ( ; i < length; i++ ) {
        // Only deal with non-null/undefined values
        if ( (options = arguments[ i ]) != null ) {
            // Extend the base object
            for ( name in options ) {
                src = target[ name ];
                copy = options[ name ];

                // Prevent never-ending loop
                if ( target === copy ) {
                    continue;
                }

                // Recurse if we're merging plain objects or arrays
                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                    if ( copyIsArray ) {
                        copyIsArray = false;
                        clone = src && jQuery.isArray(src) ? src : [];

                    } else {
                        clone = src && jQuery.isPlainObject(src) ? src : {};
                    }

                    // Never move original objects, clone them
                    target[ name ] = jQuery.extend( deep, clone, copy );

                // Don't bring in undefined values
                } else if ( copy !== undefined ) {
                    target[ name ] = copy;
                }
            }
        }
    }

    // Return the modified object
    return target;
};
可以看到這麼一句：
jQuery.extend = jQuery.fn.extend

同時指向一個函數卻實現不同的功能，可以思考一下為什麼？其實很簡單，加上函數裡面this的指向問題，如果是jQuery.extend({})，函數裡面的this指向的是jQuery，如果是

jQuery.fn.extend({})，函數裡面的this指向jQuery.fn，這樣就能知道到底是往jQuery拓展類本身添加方法還是往jQuery的原型上添加方法同時繼承個jQuery對象了。

方法就是往jQuery.prototype上添加方法，如：

 

 向jquery拓展類本身添加工具方法，如：

 

六、$.noConflict()

看源碼，這裡jQuery命名空間最底部的一段：

個人覺得這是一種不使用return方式形成的閉包方式，return方式是函數執行將返回值賦值到一個全局變數上，而jQuery的做法是直接在裡面賦值都window上，其作用是一樣的，如果使用return方式，return jQuery到外層全局變數也是可以的，但是，jQuery作者為什麼沒有這麼做呢？其實有很深沉的含義在裡面，window.jQuery和window.$也可能造成變數污染，比如和prototype庫中的window.$形成污染（或者同時引入jQuery的不同版本），那該如何解決呢？那就的靠jQuery.noConflict()來解決了。解決衝突是有前提的：

1、其他使用jQuery、$變數的庫必須在引入jQuery之前引入。（因為如果在jQuery之後引入，就直接覆蓋了jQuery了）

 那麼jQuery是如何解決和其他庫的衝突的呢？看源碼：

在jQuery命名空間的頂部先把全局作用域window中的jQuery和$先賦值給jQuery命名空間中的局部變數存放起來（如果不存在，_jQuery和$的值就是undefined），如果存在衝突，那麼再使用jQuery或者$之前，先執行$.noConflict()，可以看源碼這個函數做什麼了：

如果全局作用域中（window上）的$和jQuery命名空間上的jQuery是全等的，那麼將全局作用域中（window上）的$賦值給命名衝突庫中的$（已存放到_$中），如果deep為true，說明jQuery也有衝突，也將jQuery從新賦值給命名衝突庫中的jQuery（已存放到_jQuery中），最後return jQuery，我們可以對jQuery中的$重新賦值，如：

在不存在衝突的情況下執行了$.noConflict()後，$不能再使用，它的值是undefined。至此，可以說jQuery實現了對全局作用域的零變數污染。

七、總結

 1、jQuery的本質是一個函數，但是不作為構造函數使用，而是返回 一個構造函數init的實例，也就是jQuery對象。

 2、jQuery函數重置了它的原型（prototype對象），重新定義，同時作為返回值的構造函數init的實例的原型也被重置，指向jQuery的原型，所有構造函數init的實例繼承了jQuery原型上的所有屬性和方法。

 

 以上是本人的一下理解，有錯歡迎指出，網上有很多分析jQuery源碼的，更多請參考：

1、https://www.zhihu.com/question/20521802

2、by Aaron：http://www.cnblogs.com/aaronjs/p/3279314.html

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Socket網路編程
    1.網路編程的概念： 網路編程從大的方面說就是對信息的發送到接收，中間傳輸為物理線路的作用，編程人員可以不用考慮…… 網路編程最主要的工作就是在發送端把信息通過規定好的協議進行組裝包，在接收端按照規定好的協議把包進行解析，從而提取出對應的信息，達到通信的目的！中 間最主要的就是數據包的組裝，數據包的 ...
  • HTML5+JavaScript動畫基礎 完整版 中文pdf掃描版
    《HTML5+JavaScript動畫基礎》包括了基礎知識、基礎動畫、高級動畫、3D動畫和其他技術5大部分，分別介紹了動畫的基本概念、動畫的JavaScript基礎、動畫中的三角學、渲染技術、速度向量和加速度、邊界與摩擦力、用戶交互：移動物體、緩動與彈動、碰撞檢測、坐標旋轉與斜面反彈、撞球物理、粒子 ...
  • html常用標簽學習筆記
    本文內容： 常見標準屬性 p div span h系列 input label form table textarea select a img ul ol 換行、水平線標簽 常見標準事件屬性 PS：html5新增的幾個標簽也比較火，後續可能會在其他博文補充。 首發日期：2018-04-01 常見標... ...
  • HTML5程式開發範例寶典 完整版 (韓旭等著) 中文pdf掃描版
    HTML5程式開發範例寶典緊密圍繞編程者在編程中遇到的實際問題和開發中應該掌握的技術，全面介紹了利用HTML進行程式開發的各方面技術和技巧。全書共16章，內容包括HTML網頁佈局、HTML基本元素、HTML高級元素、表單的使用、列表的使用、超鏈接、表格應用、圖形圖像處理、文字及圖片特效、多媒體應用、 ...
  • HTML5從入門到精通(明日科技) 中文pdf掃描版
    HTML5從入門到精通系統、全面地講解了HTML語言及其最新版本HTML5的新功能與新特性，技術新穎實用。書中所有知識點均結合實例進行講解，方便讀者動手實踐。同時在每章的最後還設置了習題，通過這些習題可以對本章學到的知識進行鞏固。《HTML5從入門到精通》不僅能夠使讀者系統而全面地學習理論知識，還能 ...
  • HTML5秘籍(第2版) 中文pdf掃描版
    HTML5秘籍(第2版)共包括四個部分，共13章。第一部分介紹了HTML5的發展歷程，用語義元素構造網頁，編寫更有意義的標記，以及構建更好的Web表單。第二部分介紹了HTML5中的音頻與視頻、CSS3、Canvas繪圖技術等內容。第三部分介紹了數據存儲、離線應用、與Web伺服器通信，以及HTML5與 ...
  • Vue.js學習筆記總結1
    一、vue介紹 + vue類似於高級的模版引擎 + vue的核心思想就是：數據驅動視圖 MVVM 1. 每一個vue程式都是以 new Vue()開始的 2. 每一項vue實例都接收一個選項對象來配置vue應用 3. 選項的 el 屬性用來高數 vue的啟動入口節點 + 入口節點中所有的節點就可以使 ...
  • HTML5與CSS3實例教程(第2版) 附源碼 中文pdf掃描版
    HTML5和CSS3技術是目前整個網頁的基礎。《HTML5與CSS3實例教程(第2版)》共分3部分，集中討論了HTML5和CSS3規範及其技術的使用方法。這一版全面講解了最新的HTML5和CSS3技術，所有實例均使用最新特性實現，針對的是最新版本的瀏覽器。 《HTML5與CSS3實例教程(第2版)》 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類