首页 > 代码库 > (转)整体把握jQuery -jQuery 的原型关系图

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

2024-07-16 17:11:40   222人阅读

整体把握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)代码。
  1. /** 
  2. * ① 何为 jQuery？ 
  3. * 
  4. * window 是对象，它有两个属性，分别为 jQuery 和 $，其值是一函数，此函数的名字是 jQuery。在函数 
  5. * 的定义实体中，其实是通过 jQuery.fn.init 函数来构造对象的，init 函数才是真正的构造函数。也就是说， 
  6. * 我们通过 ${ ... ) 得到的其实就是 jQuery.fn.init 的实例。 
  7. */  
  8. var jQuery = window.jQuery = window.$ = function( selector, context ) {  
  9.     // The jQuery object is actually just the init constructor ‘enhanced‘  
  10.     return new jQuery.fn.init( selector, context );  
  11. };
复制代码
  1. /** 
  2. * ② 所谓的 jQuery 的体魄  
  3. * 
  4. * jQuery 函数有两个属性，分别为 fn 和 prototype，其值是一匿名对象(json 对象)。 
  5. */  
  6. jQuery.fn = jQuery.prototype = {  
  7.     init: function( selector, context ) {  
  8.         ...  
  9.     },  
  10.       
  11.     jquery: "1.2.6",  
  12.       
  13.     get: function( num ) {  
  14.         ...  
  15.     },  
  16.          ...  
  17. }  
复制代码
  1. /** 
  2. * ③ 赋予 jQuery 力量吧 
  3. * 
  4. * 这段代码别看就一句话，很短，不是吗？但这段代码是非常重要的。 
  5. * 
  6. * 首先，init 只是一个函数，通过 jQuery.fn.init 构造出来的对象，只是 jQuery.fn.init 的实例而已， 
  7. * jQuery.fn 之前也说了，它是一匿名的 json 对象，包含 init 等等函数，我们想让 jQuery.fn.init 构造 
  8. * 出来的对象具备很多行为的话，prototype 就是最好的手段之一。假设我们定义一个 function，名字叫做 Car 
  9. * 吧，使用 prototype 为其添加行为的方式我们很熟悉吧： 
  10. * function Car(owner) { 
  11. *   this.owner = owner; 
  12. * } 
  13. * Car.prototype = { 
  14. *   go: function() { ... } 
  15. *   brake: function() { ... } 
  16. * } 
  17. * 这样，通过 new Car() 构造出来的对象就具备了 go 和 brake 行为。 
  18. * 
  19. * 因此，就因为下面的一句话，被 init 构造出来的对象就具备了 jQuery.fn 所定义的所有行为了，很帅吧！ 
  20. */  
  21. // Give the init function the jQuery prototype for later instantiation  
  22. jQuery.fn.init.prototype = jQuery.fn;  
复制代码
  1. /** 
  2. * ④ 给我扩展的自由好吗 
  3. * 
  4. * 诚然，jQuery 或 jQuery.fn 定义的 function 你有可能会觉得不够用，没关系，John Resig 为我们提供了 
  5. * 扩展的空间。jQuery 和 jQuery.fn 都有一个名字为 extend 的属性，该属性的类型就是一个 function， 
  6. * 这个 function 本身就已经为我们提供了扩展功能。 
  7. * 
  8. * extend 属性所代表的 function，不过 50 行代码，写的太精辟了，有时间的话，大家可以一步一步的调试下， 
  9. * 见识下 John Resig 的神功～ 
  10. */  
  11. jQuery.extend = jQuery.fn.extend = function() {  
  12.     ......  
  13. }  
复制代码
       整个 jQuery 的核心内容就是以上四块代码，诸如事件处理的代码，你都可以从以上四块代码找到影子。Enjoy jQuery～


联系
我们