(转)总体把握jQuery -jQuery 的原型关系图

总体把握jQuery -jQuery 的原型关系图

（原）http://www.html5cn.org/article-6529-1.html

2014-7-2 17:12| 发布者: html5cn |来自: 博客园| 评论: 0

 

摘要: 一幅图展现 jQuery 中各对象之间的关系，这就是不少人想要的最直观的总结 jQuery 的方式。在这篇文章中，一幅画展现整个 jQuery 的核心内容，并逐一解释。 ...

 

 

若干个月前，看到一篇文章，内容很简单，就是一幅图，展现的是 jQuery 中各对象之间的关系，当时就以为，这就是我想要的最直观的总结 jQuery 的方式。在那篇文章中，也有不少人表示不解，说看不明白。这里我也重画了一幅，并逐一解释。附件提供了 visio 格式的文件。         下面将结合 jQuery 源码，对上图的各个部分逐一解释。在图中，圆圈数字表明的是 jQuery 源码的位置，圆圈数字同样的位置代表这几个地方出自同块(block)代码。 /**  * ① 何为 jQuery？  *  * window 是对象，它有两个属性，分别为 jQuery 和 $，其值是一函数，此函数的名字是 jQuery。在函数  * 的定义实体中，实际上是经过 jQuery.fn.init 函数来构造对象的，init 函数才是真正的构造函数。也就是说，  * 咱们经过 ${ ... ) 获得的其实就是 jQuery.fn.init 的实例。  */   var jQuery = window.jQuery = window.$ = function( selector, context ) {       // The jQuery object is actually just the init constructor 'enhanced'       return new jQuery.fn.init( selector, context );   }; 复制代码 /**  * ② 所谓的 jQuery 的体魄   *  * jQuery 函数有两个属性，分别为 fn 和 prototype，其值是一匿名对象(json 对象)。  */   jQuery.fn = jQuery.prototype = {       init: function( selector, context ) {           ...       },              jquery: "1.2.6",              get: function( num ) {           ...       },            ...   }   复制代码 /**  * ③ 赋予 jQuery 力量吧  *  * 这段代码别看就一句话，很短，不是吗？但这段代码是很是重要的。  *  * 首先，init 只是一个函数，经过 jQuery.fn.init 构造出来的对象，只是 jQuery.fn.init 的实例而已，  * jQuery.fn 以前也说了，它是一匿名的 json 对象，包含 init 等等函数，咱们想让 jQuery.fn.init 构造  * 出来的对象具有不少行为的话，prototype 就是最好的手段之一。假设咱们定义一个 function，名字叫作 Car  * 吧，使用 prototype 为其添加行为的方式咱们很熟悉吧：  * function Car(owner) {  *   this.owner = owner;  * }  * Car.prototype = {  *   go: function() { ... }  *   brake: function() { ... }  * }  * 这样，经过 new Car() 构造出来的对象就具有了 go 和 brake 行为。  *  * 所以，就由于下面的一句话，被 init 构造出来的对象就具有了 jQuery.fn 所定义的全部行为了，很帅吧！  */   // Give the init function the jQuery prototype for later instantiation   jQuery.fn.init.prototype = jQuery.fn;   复制代码 /**  * ④ 给我扩展的自由好吗  *  * 诚然，jQuery 或 jQuery.fn 定义的 function 你有可能会以为不够用，不要紧，John Resig 为咱们提供了  * 扩展的空间。jQuery 和 jQuery.fn 都有一个名字为 extend 的属性，该属性的类型就是一个 function，  * 这个 function 自己就已经为咱们提供了扩展功能。  *  * extend 属性所表明的 function，不过 50 行代码，写的太精辟了，有时间的话，你们能够一步一步的调试下，  * 见识下 John Resig 的神功～  */   jQuery.extend = jQuery.fn.extend = function() {       ......   }   复制代码        整个 jQuery 的核心内容就是以上四块代码，诸如事件处理的代码，你均可以从以上四块代码找到影子。Enjoy jQuery～