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的方式。