jQuery源碼框架導航

jQuery的適用面很是的廣，用了好久，如今忽然想提筆記錄一下研讀JQuery源碼的過程。寫文章的時候去jQuery官網查看了一下，最新的jQuery版本是3.4.1，本次解析選擇了3.3.1版本進行學習記錄，雖然小版本會有一些差別，可是大致的框架和實現的功能都差很少，代碼所在的位置也大體相同。

write less,do more

本文會依據《jQuery技術內幕：深刻解析jQuery架構設計與實現原理》一書的解析流程模式進行相應的學習過程記錄。

整體架構

jQuery的模塊分爲三部分：

• 入口模塊
• 底層支持模塊
• 功能模塊

入口模塊

入口模塊的功能比較簡單--構造jQuery對象。

底層支持模塊

此模塊是支持整個jQuery框架完美運行的一些底層方法。

• 工具方法 - Utilities
• 回調函數列表 - Callbacks
• 異步隊列 - Defferred
• 瀏覽器功能調試 - Support
• 數據緩存 - Data
• 隊列 - Queue
• 選擇器 - Sizzle

功能模塊

此模塊包含一些開發者經常使用的DOM操做，事件系統，動畫等經常使用功能。

• 屬性操做 - Attributes
• 事件系統 - Events
• DOM遍歷 - Traversing
• 樣式操做 - CSS
• 異步請求 - Ajax
• 動畫 - Effects

jQuery的自調用匿名函數

下面是jQuery的起點，首先分析一下這段代碼的做用和結構。

(function( global, factory ) {
     if ( typeof module === "object" && typeof module.exports === "object" ) {
        // For CommonJS and CommonJS-like environments where a proper `window`
		// is present, execute the factory and get jQuery.
		// For environments that do not have a `window` with a `document`
		// (such as Node.js), expose a factory as module.exports.
		// This accentuates the need for the creation of a real `window`.
		// e.g. var jQuery = require("jquery")(window);
		// See ticket #14549 for more info.
        module.exports = global.document ?
            factory( global, true ) :
            function( w ) {
                if ( !w.document ) {
                    throw new Error( "jQuery requires a window with a document" );
                }
                return factory( w );
            };
    } else {
        factory( global );
    }
// Pass this if window is not defined yet
}(typeof window !== "undefined" ? window : this, function( window, noGlobal ) { 
    //這裏包括後面的一萬多行JQ代碼
}));
複製代碼

咱們能夠將上面這個匿名函數簡化爲

(function( global, factory ) {
    .....
}(arg1,arg2)); 
複製代碼

arg1是 「typeof window !== "undefined" ? window : this」 arg2是 「function(window,noGlobal){}」 形參global對應着實參arg1，形參factory對應着實參arg2。 第一個arg1表明的三目元算符用於判斷當前執行環境是否支持window對象。 第二個arg2則是一個函數，包含着一萬多行jQuery的功能函數和底層支持函數。 弄清楚了這個匿名函數外層兩個參數的含義和做用，咱們就再看看內部這段代碼的做用是什麼。

if ( typeof module === "object" && typeof module.exports === "object" ) {
 		//這個if裏面的一段代碼是爲了兼容符合CommonJS規範的一些框架例如node.js等
        module.exports = global.document ?
            factory( global, true ) :
            function( w ) {
                if ( !w.document ) {
                    throw new Error( "jQuery requires a window with a document" );
                }
                return factory( w );
            };
    } else {
    //固然，若是沒有用相似框架
    //就能夠直接返回當時的arg2也就是包含整個jQuery功能的函數而且傳入arg1，
    //在這裏就是以下展示形式
        factory( global );
    }
複製代碼

jQuery爲何要使用自調用匿名函數

在上面咱們弄清楚告終構，如今來講說這麼寫的優點是什麼。 jQuery 是一個很火爆的工具庫，被成千上萬的開發者引用，會出如今各類程序環境中。那麼確保jQuery的代碼不受其餘代碼的干擾，或者不去幹擾其餘代碼，這個匿名函數所帶來的私有函數做用域就能夠阻止代碼衝突的問題。這也是任何一個JavaScript庫和框架都必須具有的功能。

window.jQuery = window.$ = jQuery;
複製代碼

在jQuery庫的末尾有以上這麼一句話，手動將「jQuery」變量添加在window對象上，明確的使用變量「jQuery」成爲公開的全局變量，而其內部的arg2表明的函數部分所有都是私有的。

總結

此文藉助《jQuery技術內幕》和本身的研讀分析，前半部分粗略的給想學習jQuery源碼的朋友們進行一個樹立。然後半部分，則分析了jQuery的自調用匿名函數。歡迎交流，若有不足指出，請指正，萬分感謝。