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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券