jQuery1.8.2原始碼學習入手

JS IS JS發表於2018-09-02
jQuery原始碼

介紹

第一次正式寫部落格，打算通過CSDN來記錄自己的學習過程，希望自己能夠堅持下去。為什麼叫原始碼學習而不是叫原始碼解析，是因為自己還處於對原始碼一竅不通的狀態，如果有幸被大家看到我的部落格，希望大佬們指出我理解有誤的地方。如果部落格的編寫方式有問題的話，也希望大家能夠多多指導，一起學習進步。
我這裡是對jQuery的1.8.2版本進行學習，因為jq在2.0+的版本就已經放棄對ie8的支援了。之所以選擇1.8.2是想多瞭解一下jq對ie相容性的處理。推薦一個靜態資源庫(https://cdn.baomitu.com/)

正式

如何開啟對原始碼的學習

當下載完原始碼後，一臉懵逼不知道如何下手，相信很多人都是一樣懵逼。面向百度學習，大家都懂的。最後瞭解到，可以通過一個簡單的html+js斷點除錯。至於如何具體斷點除錯，大家可以去網上學習一下，本文下面會簡單地提到斷點除錯。
test.html（引入對應的js版本）如下：

<!Doctype html>
<html>
    <head>
        <title>study jquery code</title>
    </head>
    <body>
        <script src="./jquery-1.8.2.js"></script>
        <script>
            //在控制檯列印$()
            console.log($())
        </script>
    </body>

</html>

斷點圖片如下：
斷點圖片
入口如下：
這裡寫圖片描述

通過打斷點的方式找到jq的初始化入口。有沒有感到一絲絲的興奮和激動，我們已經通過簡單的幾步已經學會了如何對jQuery原始碼下手。

對入口進行分析

一、 我們先回過頭來分析程式碼的整個構建，整個程式碼被包裹在(function(window, undefined) {})(window)中，這是一個IIFE（立即執行函式表示式），這樣做的意義如下：
a、匿名函式立即執行，防止函式內外變數名衝突，一般外掛中的原始碼對外只暴露極少數變數來提供對外掛的引用。
b、傳入window引數，是為了方便對window物件的引用，減少作用域查詢的時間，提高js效能。
c、undefiend引數的作用：有些老的瀏覽器並不支援undefined，直接使用會導致報錯，所以考慮相容性問題，需要新增改引數。

二、 開始對入口除進行分析，我們呼叫時$()，觸發了jQuery函式，這裡我們便需要開始發動我們的小腦筋想想這是怎麼實現的。有兩個問題：jQuery為區域性變數，為何我們能夠訪問到？$與jQuery 相等在何處宣告？我們通過原始碼來找到問題的答案。
答案就在9422行，內容如下：

window.jQuery = window.$ = jQuery;
//暴露jQuery介面為全域性物件

三、接著來看jQuery函式具體內容：

// 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 );
},

在這個函式執行完了就是一個new建構函式的過程，返回的就是一個jQuery初始完成的物件。接著我們就可以找到jQuery.fn.init對應的位置，開啟jQuery學習之路啦

參考部落格：
前段百科—JS中形如(function(window, undefined) {})(window)寫法的理解

相關文章