码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2014-08-10 01:32:29      阅读：409      评论：0      收藏：0      [点我收藏+]

标签：style   blog   http   color   使用   os   io   strong   

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

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

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

 
摘要: 一幅图展示 jQuery 中各对象之间的关系，这就是很多人想要的最直观的总结 jQuery 的方式。在这篇文章中，一幅画展示整个 jQuery 的核心内容，并逐一解释。 ...
 
 
       若干个月前，看到一篇文章，内容很简单，就是一幅图，展示的是 jQuery 中各对象之间的关系，当时就觉得，这就是我想要的最直观的总结 jQuery 的方式。在那篇文章中，也有很多人表示不解，说看不明白。这里我也重画了一幅，并逐一解释。附件提供了 visio 格式的文件。 

bubuko.com,布布扣

       下面将结合 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～

(转)整体把握jQuery -jQuery 的原型关系图,布布扣,bubuko.com

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

标签：style   blog   http   color   使用   os   io   strong   

原文地址：http://www.cnblogs.com/allearner/p/3901752.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！