整体把握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. jquery: "1.2.6",
  11. get: function( num ) {
  12. ...
  13. },
  14. ...
  15. }

复制代码

  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 的原型关系图的更多相关文章

  1. jQuery 的原型关系图,整体把握jQuery

            若干个月前,在博客园中看到一篇文章,内容很简单,就是一幅图,展示的是 jQuery 中各对象之间的关系,当时就觉得,这就是我想要的最直观的总结 jQuery 的方式.在那篇文章中,也有 ...

  2. 整理了一下 jQuery 的原型关系图,理解起来更加方便一些。

    图例:黄色的为对象,蓝色的为函数.

  3. JQuery里的原型prototype分析

    在 JavaScript 中,每个函数对象都有一个默认的属性 prototype,称为函数对象的原型成员,这个属性指向一个对象,称为函数的原型对象,当我们每定义了一个函数的时候,JavaScript ...

  4. jquery和ajax的关系详细介绍【转】

    jquery和ajax的关系详细介绍 http://www.jb51.net/article/43965.htm

  5. js便签笔记(5)——Dean Edwards大牛的跨浏览器AddEvent()设计(不知道是不是jQuery事件系统的原型)

    1. 前言: 在看Aaron的jquery源码解读时候,看到事件系统那块,作者提到了Dean Edwards的添加事件的设计,于是就点进去看了看.首先让我吃惊的是,代码非常少,寥寥几十行,非常简单.于 ...

  6. 什么是jquery $ jQuery对象和DOM对象 和一些选择器

    1什么是jQuery: jQuery就是将一些方法封装在一个js文件中.就是个js库 我们学习这些方法. 2为什么要学习jQuery: 原生js有以下问题: 1.兼容性问题2.代码重复3.DOM提供的 ...

  7. jQuery: jquery.json.js

    http://api.jquery.com/jQuery.parseJSON/ http://www.json.org/json-zh.html http://fineui.codeplex.com/ ...

  8. 一款jQuery满屏自适应焦点图切换特效

    一款jQuery满屏自适应焦点图切换特效 ,自适应当前浏览器的宽度,可以作为网站整个大背景的却换效果,很不错的一款不jquery特效. 兼容性没的说直接秒杀了IE6.适用浏览器:IE6.IE7.IE8 ...

  9. JQuery --- 第一期 (初识jQuery, JQuery核心函数和工具方法)

    个人学习笔记  初识jQuery 1.我的第一个JQuery <!DOCTYPE html> <html lang="en"> <head> & ...

随机推荐

  1. node.js基础 1之 HTTP事件回调进阶(HTTP模块)

    HTTP概念进阶 1. 什么是回调? 回调是异步编程时的基础,将后续逻辑封装成起始函数的参数,逐层嵌套 2. 什么是同步/异步? 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯 ...

  2. 2014——>2015,我的薪资依然是4.5

    悄悄的,2014离开了,带走了我的青春中的一年.这一年,我才毕业,这一年,我又混掉了...... 总想写点什么,可真正到写的时候,却发现自己文笔是这样的不堪,也许是缺少锻炼的缘故,也许自己天生就不善言 ...

  3. 学习PYTHON之路, DAY 3 - PYTHON 基础 3 (函数)

    一 set 集合 (无序且不重复的元素集合) 基本操作: t.add('x') # 添加一项 s.update([10,37,42]) # 在s中添加多项 删除一项: t.discard('H') t ...

  4. 初始通过 FastClick.notNeeded 方法判断是否需要做后续相关处理

    其实前面几篇文章大家都遇到一些错误,很多时候呢,我并没有直接回复解决方案,不是LZ不想告诉大家,如果不想那就不写这个了,估计博客园啊CSDN啊那么多写博客的,很少有人把现用框架分享出来,既然分享就毫不 ...

  5. html slelect 标签默认值

    <select name="channelCode" id="channelCode" class="all_input" style ...

  6. 关于display:inline-block和float:left的区别

    <div class="pag"> <a href="#">首页</a> <a href="#"& ...

  7. 苹果下如果安装nginx,给nginx安装markdown第三方插件

    用brew install nginx 这样安装的是最新版的nginx, 但是在有些情况下,安装第三方插件需要特定的版本,更高一级的版本可能装不上. 它的原理是下载安装包进行自动安装,建立软链,这样就 ...

  8. MVC5+EF6 入门完整教程十一:细说MVC中仓储模式的应用

    摘要: 第一阶段1~10篇已经覆盖了MVC开发必要的基本知识. 第二阶段11-20篇将会侧重于专题的讲解,一篇文章解决一个实际问题. 根据园友的反馈, 本篇文章将会先对呼声最高的仓储模式进行讲解. 文 ...

  9. guava学习--FutureFallback

    FutureFallback提供一个Future的备用来替代之前失败的Future,常被用来作为Future的备份或者默认的值. @Testpublic void testFuturesFallbac ...

  10. 2013年度最强AngularJS资源合集

    原文在这里 2013年度最强AngularJS资源合集 来看我的视频教程,国内第一款完整的AngularJS视频教程http://www.imooc.com/learn/156 司徒正美 写道 htt ...