jquery源码解析：代码结构分析

本系列是针对jquery2.0.3版本进行的讲解。此版本不支持IE8及以下版本。

 

(function(){

　　(21, 94)    　　定义了一些变量和函数，   jQuery = function(){};

　　(96,283)   　　给jQuery对象添加一些属性和方法（实例方法，通过$("div")这类的jQuery实例对象来调用）

　　(285,347)  　　extend : jQuery的继承方法

　　(349,817)  　　jQuery.extend():扩展一些工具方法（静态方法，直接通过$来调用的，比如：$.trim）

　　(877,2856)　　Sizzle：复杂选择器的实现。比如：$("ul li + p ");

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

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

　　(3184,3295)　　support:功能检测

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

　　(3653,3797)　　queue():队列管理，dequeue.

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

　　(4300,5128)　　on(),trigger() 事件操作的相关方法

　　(5140,6057)　　DOM操作：添加，删除，获取（next），包装（wrap），Dom筛选

　　(6058,6620)　　css():样式的操作 

　　(6621,7854)　　提交的数据和ajax的操作:load,ajax

　　(7855,8584)　　animate():运动的操作。 show,hide,fadeIn。

　　(8585,8792)　　offset(),位置和尺寸的一些方法

　　(8804,8821)　　jQuery支持模块化的模式

　　(8826)             window.jQuery = window.$ = jQuery;

})()

 

(function(window,undefined){    

　　//window局部化，1.查找速度快。2.利于代码压缩，可以把window压缩成a。

　　//undefined，有些浏览器的undefined可以被修改，为了防止undefined被修改，所以传了一个undefined给了jQuery

　　core_strundefined = typeof undefined;    

　　　　//为了防止ie9以及以下版本，判定一个xmlNode方法为undefined时出问题。  

　　　　//比如：a.b== undefined(a为xmlNode,并且在IE9以下浏览器下，b不存在a中，出问题);  typeof a.b== "undefined"(没问题)

　　class2type = {};    

　　　　 //类型判断,里面存的是{"[object String]":"string",....}。先去了解object.prototype.toString.call()

　　core_version = "2.0.3";

　　core_concat = [].concat;    //缓存数组方法以及对象方法。利于压缩。可以对core_concat压缩。

　　......

　　var rootjQuery,

　　_jQuery = window.jQuery,       //以防在引入jQuery库时，已经有其他库引用jQuery和$标示符了。

　　_$ = window.$,         //因此先把他们保存起来。（prototype.js就引用了$标识）

　　jQuery = function(selector, context){

　　　　return new jQuery.fn.init(selector,context,rootjQuery);

　　}

　　......

　　window.jQuery = window.$ = jQuery;

})(window)  

这里我要详细的讲下new jQuery.fn.init(selector,context,rootjQuery);我看了太多别人写的jQuery源码解析，大多写的不详细，导致刚开始看的时候，没看懂。

我们平常新建一个jQuery对象：$("div")，jQuery("div")，调用的就是new jQuery.fn.init(selector,context,rootjQuery);

很多人会有疑问，怎么new一个init，就是jQuery对象。除非init.prototype 就是jQuery.prototype。

大家可以在283行看到这样一句话：jQuery.fn.init.prototype = jQuery.fn;96行看到这样一句话：jQuery.fn = jQuery.prototype = {}

印证了上面的观点。jQuery.fn.init.prototype 就是jQuery.prototype。

当你们去看init方法的时候，会发现它返回的是this，this指的就是new出来的jQuery对象，而大家都知道，当访问一个实例对象的方法和属性时，如果实例对象没有，那么就去找原型对象，因此jQuery.prototype对象中的属性和方法，都可以通过new 出来的jQuery实例对象访问。也就是$("div")这种jQuery的实例对象可以调用各种在jQuery.prototype对象中的属性和方法。

而对于这种静态属性和方法，$.trim,jQuery.trim，是在构造函数的属性上定义的，跟实例对象没有什么关系。举个例子:function Person(){},Person.prototype={};

new Person()就是实例对象，它可以调用Person.prototype中的所有属性和方法。而Person.trim = function(){}，就是静态方法，只能通过构造函数Person.trim才能进行调用。

 

有一个知识点，-webkit-margin-left   ->js访问时，会转化成webkitMarginLeft，而-ms-margin-left会转换成MsMarginLeft。

 

加油！