JQuery源码解析-整体架构的设计

最近在看jQuery的源码，查了一些资料，偶尔看到了网易云课堂里有套视频是对源码进行讲解的，是叫妙味课堂出的，看着还不错，对这方面感兴趣的推荐看下，

个人感觉很不错。所以发些文章，边学边记录。

版本：2.0.3

整体的架构：

(function(){

(21,94) 定义变量和函数，赋值JQuery

(96,283)添加JQuery的一些方法和属性

(285,347) extend JQ的继承方法

(877,2856) Sizzle：复杂选择器的实现。

(2880,3042) Callbacks:回调对象：对函数的统一管理

(3043,3183) Deferred:延迟对象：对异步的统一管理

(3184,3295) Support:功能检测

(3308,3652) data():数据缓存

(3653,3797) queue():队列管理

(3803,4299) attr() prop() val() addClass()等，对元素属性的操作。

(4300,5128) on() trigger():时间操作的相关方法

(5140,6057) DOM操作：添加 删除 获取 包装 筛选。

(6058,6620) css():样式操作（包括处理浏览器的兼容）

(6621,7854) 提交数据的ajax() load() getJson()

(7855,8584) animate() 运动方法的实现

(8585,8792) offset() 位置和尺寸等方法

(8804,8821) Jq支持模块化的支持

(8826) window.JQuery=window.$=JQuery；

})();

 

JQuery的源码中，所有代码是被包含在一个自执行的方法中的:

(function( window, undefined ) {
})( window );

至于为什么需要传入window对象，而不是在内部方法中直接使用，是因为有两原因：

1：为了便于压缩 2：当方法内部使用的时候，查找的速度快。

使用undefined这个参数是为了防止在方法外部将undefined赋值，例如：

var undefined=1

如果这样赋值，那undefined的值从此以后变为1，这回影响以后的判断。

对于JQuery的调用方式，属于链式调用，也就是说JQury().css()这种方式调用，

那这种方式就区别于一般的对象操作，先new出来一个对象，然后再调用原型链上的方法。

这是因为JQuery调用时，返回的是当前的对象。

例如：

function jQuery(){
 　　return new jQuery.prototype.init();
}
jQuery.prototype.init=function(){
　　//初始化代码
}
jQuery.prototype.css=function(){
}
jQuery.prototy.init.prototy=jQuery.prototype;
jQuery().css();

这样调用时，就不比单独调用jQuery的init方法了，直接使用jQuery()的方法时，自动就会执行初始化方法，并返回。

这样返回的是：

jQuery.prototype.init

这个对象，这个对象上的原型并没有jQuery原型上的属性和方法，所以要执行

jQuery.prototy.init.prototy=jQuery.prototype;

把init方法的原型，指向jQuery对象的原型。这样就实现了这种调用方式。