整体把握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. Android Studio安装和配置(个人研究,有错请指导)

    安装Android Studio的原因:公司有app开发者,然而公司没有测试,只好互相测试,本人并没有接触过app开发,纯小白: 自己试着安装了一下Android Studio来这里记录并分享遇到的问 ...

  2. <input type="file" id="camera" multiple="multiple" capture="camera" accept="image/*"> 上传图片,手机调用相册和摄像头

    <input type="file" id="camera" multiple="multiple" capture="ca ...

  3. Python 绘制图表之我见 ---一个java程序员的看法

    ---------------- 环境: win 10  . python3.5 https://github.com/Leechen2014/1400OS_01_Codes/blob/master/ ...

  4. 动态加载zTree,用key属性设置url链接、icon图标等

      setting 举例 1. 设置 zTree 显示节点时,将 treeNode 的 xUrl 属性当做节点链接的目标 URL var setting = { data: { key: { url: ...

  5. 关于正则表达式中参数/g /m的详细分析和例子详解

    总结1:参数/g的用法 表达式加上参数g之后,表明可以进行全局匹配,注意这里"可以"的含义.我们详细叙述: 1)对于表达式对象的exec方法,不加入g,则只返回第一个匹配,无论执行 ...

  6. PC端和移动端一些奇葩兼容性问题

    IE10默认在input框中输入内容时会显示一个'X',密码框会显示一个'小眼睛',怎么把这个默认的'X'或者'小眼睛'删除掉. 在password输入框显示一个“小眼睛”的按钮,去掉他的方法如下: ...

  7. ExtJs 之 ComboBox级联使用

    刚接触ExtJs不到一周,项目使用ExtJs框架,有个版块用到了combobox的级联(两级),遇到了一系列的问题,两天来一直查API.网络资料,终于解决了. 先列出遇到的一系列问题(也许你也遇到过! ...

  8. Python模块学习笔记

    1.作用域 私有private:用'_x'或'__xx'表示,如,_a,__ab; 公有public: 如 a,b; 特殊变量,可被直接引用,如:__author__,__name__,命名变量时一般 ...

  9. 高性能 Oracle JDBC 编程

    了解如何利用连接和语句池特性来提高 Oracle 驱动的 JDBC 程序的性能.作者:Yuli Vasiliev2009 年 4 月发布使用诸如连接池和语句池等池技术可以显著提高数据库密集型应用程序的 ...

  10. tomcat安全加固

    -R 640 conf/*3. 首次安装完成后立即删除webapps下面的所有代码rm -rf /srv/apache-tomcat/webapps/*4. 注释或删除 tomcat-users.xm ...