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。
加油!