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