Jquery源碼分析-整體結構

　　最近在學習Jquery的最新的源碼，Jquery-3.3.1版本。網上有很多對jquery解析的文章。但是我還是要自己去嘗試着看一篇jquery的源碼。本系列博客用來記錄其中的過程，並同大家分享。本次學習Jquery源碼是結合Jquery API來學習的。結合API來學習，首先會讓我理解Jquery的整體結構，讓我覺得Jquery源碼是有跡可循。如果盲目的去看Jquery源碼，10000多行的代碼可能會讓人望而生畏。

　　Jquery API 很好地表達了Jquery的整體結構，可以很清楚知道Jquery由哪幾部分組成。Jquery主要由核心方法、選擇器、Ajax、屬性、CSS、文檔處理、篩選、事件、效果、工具、事件對象、延遲對象和回調函數等組成。下面是Jquery的整體框架圖。

　　從上圖，我們能直觀明了的Jquery結構。我們先看Jquery的聲明方法。

閉包函數

　　Jquery的所有對象都封裝在閉包上。閉包的好處，我以前寫關相關的博客。閉包的一大特點是，所有聲明的變量、方法都是在函數內部使用，與全局變量沒有沖突。

(function(global,factory){
				
			})(window,function(){
				
			});

　　Jquery所有的實現都是被封裝在一個立即執行的匿名函數里。這個函數有兩個參數一個參數是window對象，另一個參數就是一個函數，用來聲明jquery的方法以及屬性，這個函數是主體。

(function(global,factory){
	if(typeof module ==="object" && typeof module.exports==="object"){
		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(g);
	}
})(this,function(g,t){
	
});

　　上面的代碼，主要是用來進行模塊化處理，讓jquery可以適用在CommonJS規范下的代碼。

Jquery使用

　　在使用Jquery的時候，可以通過JQuery或者$直接調用Jquery提供的方法，並不需要去實例化Jq對象。Jquery是個立即執行的閉包函數，它把Jquery和$暴露出來給使用。

 window.jQuery = window.$ = jQuery; 通過這樣的方法，將Jquery對象賦值給window對象，window對象是個全局對象。對於面向對象語言，我們在使用類的時候，很多時候都通過new關鍵字來實例化類的對象。JavaScript中沒有類的概念，但是在JavaScript中也可以通過函數來創建對象。Jquery並不需要new關鍵字來實例化。

jQuery = function( selector, context ) {

        // The jQuery object is actually just the init constructor 'enhanced'
        // Need init if jQuery is called (just allow error to be thrown if not included)
        return new jQuery.fn.init( selector, context );
    },

　　Jquery是通過這樣來聲明的，也就是說Jquery已經是一個實例化的對象了，所以我們可以直接使用Jquery對象。我們來看Jquery.fn.init函數時怎么聲明的。Jquery聲明的完整代碼如下。

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

　　首先聲明了Jquery函數，同時為Jquery聲明了原型對象。

　　

$(function(){
                $(".jqTest").text("Jquery");
            var obj=$.extend(true, {"second":"Jquery"}, {first:"Hello"});
            var j=obj.first+obj.second;
            console.log(j);
            })

　　上面的代碼簡單的介紹了jquery的使用。$.extend，是jquery直接提供的靜態方法，$()方式調用的是Jquery.fn中的方法。兩種不同調用Jquery的方式。