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。

 

加油!

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。