jQuery源码逐行分析学习01(jQuery的框架结构简化)

最近在学习jquery源码，在此，特别做一个分享，把所涉及的内容都记录下来，其中有不妥之处还望大家指出，我会及时改正。望各位大神不吝赐教！同时，这也是我的第一篇前端技术博客，对博客编写还不是很熟悉，美化工作可能不够到位，也希望大家多多见谅！

首先这篇文章要给大家分享的是：jquery的框架结构，把框架结构简单化处理

此处我所学习使用的jquery版本是2.0.3版本(文件已经上传到我的github中，大家可以去下载，地址：https://github.com/cumtchj/jquery2.0.3)，一个相对比较老的版本，但是其实基本的功能都与新版本类似，该版本开发版代码共8830行。

此外，2.x相较于1.x版本，去除了对ie6/7/8的支持，这也使得其中减少了很多有关于兼容性的代码，便于我们去理解。

下面，我们就开始一一深入，剥开jquery的层层外壳...

首先是一开始的部分，一部分注释，里面包含了一些jquery的信息

接下来从第14行开始就是jquery真正的源码了

1 (function(window,undefined){
2 })();
此处是一个匿名函数自执行，它的好处在于，可以把代码块中所有的变量都变成局部变量，这样就不会造成对全局变量的一个污染，导致代码冲突。下面举个例子：

1 (function(){
2 var a=10;
3 function $(){
4 alert(a);
5 }
6 })();
7 alert(a);//调用不到
8 $();//调用不到
但是这样一来，造成了外部调用不到内部局部变量的情况，所以需要对外提供使用内部局部变量和方法的接口

1 (function(){
2 var a=10;
3 function $(){
4 alert(a);
5 }
6 window.$=$;//将函数挂载到window上
7 })();
8 $();//10
在jquery中就是这样实现的，在前面(21,94)行，jquery定义了一些变量和函数，在8826行

1 //(8826)
2 window.jquery=window.$=jquery;
将jquery挂载到了window上，这样就使得外部可以访问到jquery内部的变量和方法

接下来，在(96,283)行

1 jquery.fn=jquery.prototype={}
此处，jquery.prototype，这表明jquery是一个基于面向对象的程序，往后就是在给jquery对象添加一些属性和方法。针对面向对象，下面举个例子：

1 //我们经常会这样写
2 $('#div').css();
3 $('#div').html();
4 //这个类似于
5 var arr=new array();
6 arr.push();
7 arr.sort();
8 //其中
9 $('#div')//是一个函数调用,但是其执行结果是一个对象
接下来，在(285,347)行

1 jquery.extend=jquery.fn.extend=function(){}
extend:jquery的继承方法,后需添加的代码通过jquery方法挂载到jquery对象中,方便扩展

接下来，在(349,817)行

1 jquery.extend()
jquery的扩展工具方法。关于工具方法，下面做一个简单的解释：

//$()是一个对象,所以其后的方法是一个实例的方法,相对高级,调用工具方法
$().css();
$().html();
//$是一个函数,在函数下扩展方法是一个静态方法,是jquery最底层的东西
$.trim();
$.proxy();
接下来，在(877,2856)行

sizzle:这是一个复杂选择器的实现，是第三方独立程序，这意味着以后做相关选择器开发就可单独使用sizzle

接下来，在(2880,3042)行

1 jquery.callbacks=function(options){}
回调对象:通过回调对象统一管理函数。有关于回调对象，下面举个例子：

1 function fn1(){alert(1)}
2 function fn2(){alert(2)}
3 var cb=$.callbacks();
4 cb.add(fn1);
5 cb.add(fn2);//将fn1，fn2添加到cb上
6 cb.fire();//1,2
7 cb.remove(fn2);//移除fn2
8 cb.fire();//1
接下来，在(3043,3183)

1 jquery.extend({deferred:function(func){}})
deferred:延迟对象,对异步的统一管理。下面有关于延迟对象，举一个简单的例子：

1 settimeout(function(){
2 　　alert(1);
3 },1000);
4 alert(2);//2,1
因为settimeout定时器是一个异步的，所以输出的结果为2,1，下面我们稍作修改：

1 var dfd=$.deferred();
2 settimeout(function(){
3 alert(1);
4 dfd.resolve();
5 },1000);
6 dfd.done(function(){
7 alert(2)
8 });//1,2
当使用了延迟对象以后，程序只有执行到resolve方法才会去执行done中的方法，这样输出结果就是1,2了。

接下来，在(3184,3295)行

1 jquery.support=(function(support){});
support:功能检测,无需判断浏览器,通过判断功能检测浏览器版本

例:3199行checkbox默认状态,webkit中新版本是'on',老版本是''

接下来，在(3308,3652)行

data()方法:有关于数据缓存的部分。举个例子：

1 $('#div1').data('name','hello');
2 $('#div1').data('name');//hello
接下来，在(3653,3797)行

1 jquery.fn.extend({queue:function(type,data){}})
queue:队列管理,入队 dequeue:出队

$('#div1').animate({left:100});
$('#div1').animate({top:100});
$('#div1').animate({width:100});//left->top->width 通过队列管理执行顺序
这个就是通过queue队列管理实现的顺序进行动画。

接下来，在(3803,4299)

1 jquery.fn.extend({attr:function(name,value){}})
其中定义了attr(), prop(),val(),addclass()...方法,对元素属性的操作。

接下来，在(4300,5128)行

其中定义了on() trigger()...方法,事件操作相关方法

接下来，在(5140,6057)行

定义了dom操作的方法:添加,删除,获取,包装,筛选...

接下来，在(6058,6620)行

css():样式的操作

接下来，在(6621,7854)行

定义了提交数据和ajax():ajax(),load(),getjson()...

接下来，在(7855,8584)行

animate():运动的操作

接下来，在(8585,8792)行

offset()...:位置和尺寸的方法

最后，在(8804,8821)

jquery支持模块化的模式

这样，jquery的整个架构简化就完成了，下面再梳理一下：

1 (function(){
2 (21 , 94) 定义了一些变量和函数 jquery = function(){};
3 (96 , 283) 给jq对象，添加一些方法和属性
4 (285 , 347) extend : jq的继承方法
5 (349 , 817) jquery.extend() : 扩展一些工具方法
6 (877 , 2856) sizzle : 复杂选择器的实现
7 (2880 , 3042) callbacks : 回调对象 : 对函数的统一管理
8 (3043 , 3183) deferred : 延迟对象 : 对异步的统一管理
9 (3184 , 3295) support : 功能检测
10 (3308 , 3652) data() : 数据缓存
11 (3653 , 3797) queue() : 队列方法 : 执行顺序的管理
12 (3803 , 4299) attr() prop() val() addclass()等 : 对元素属性的操作
13 (4300 , 5128) on() trigger() : 事件操作的相关方法
14 (5140 , 6057) dom操作 : 添加 删除 获取 包装 dom筛选
15 (6058 , 6620) css() : 样式的操作
16 (6621 , 7854) 提交的数据和ajax() : ajax() load() getjson()
17 (7855 , 8584) animate() : 运动的方法
18 (8585 , 8792) offset() : 位置和尺寸的方法
19 (8804 , 8821) jq支持模块化的模式
20 (8826) window.jquery = window.$ = jquery;
21 })();
谢谢大家来看我的博客(*￣︶￣)
---------------------
作者：cumtchj
来源：csdn
原文：https://blog.csdn.net/u014177575/article/details/79351161
版权声明：本文为博主原创文章，转载请附上博文链接！