`
zachary.guo
  • 浏览: 487176 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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~
  • 大小: 70.1 KB
分享到:
评论
3 楼 ZLHRoar 2014-03-28  
   
2 楼 xifeng91 2013-08-05  
 
1 楼 axxxman 2012-01-29  
    

相关推荐

    jQuery_的原型关系图

    在这个图中,我们可以看到对象之间的继承关系,以及jQuery如何扩展和利用JavaScript的原型链机制。 首先,让我们讨论JavaScript的原型(Prototype)概念。在JavaScript中,每个对象都有一个内置的`__proto__`属性,...

    页面原型JQUERY UI

    页面原型JQUERY UI 可直接替换UI CSS

    jquery鼠标拖拽原型

    【jQuery鼠标拖拽原型】是一种...通过以上知识点的学习和实践,你可以创建一个功能完备且易于使用的jQuery鼠标拖拽原型。这个原型不仅适用于个人学习,也可以作为实际项目中的基础组件,提高Web应用的互动性和易用性。

    用 jquery easyui 做的一组界面原型

    总结,这个项目不仅展示了如何使用jQuery EasyUI创建基本的界面原型,还提供了实际问题的解决方案,对于想要学习或提高EasyUI使用技能的开发者来说,是一个宝贵的资源。通过深入研究和实践,开发者能够掌握EasyUI的...

    一个小项目的界面原型,全是用jquery做的!

    这个小项目中,开发者完全依赖jQuery来构建界面原型,这展示了jQuery的强大功能和易用性。 首先,让我们深入理解jQuery的核心概念。jQuery通过选择器(如$("#id")、$(".class"))方便地选取页面元素,然后可以使用...

    jquery例子大全 jquery demo

    在“jQuery例子大全 jQuery demo”这个压缩包中,包含了一系列的示例,旨在帮助用户快速理解和掌握jQuery的核心概念及常用方法。** ### 一、jQuery 基本使用 jQuery 的核心在于它的选择器,它允许我们方便地选取...

    完整jquery UI后台系统原型java工程

    这个"完整jQuery UI后台系统原型Java工程"是一个基于jQuery UI的解决方案,专为构建复杂的后台管理系统而设计。其目标是提供一种高效、易于使用的界面,与ExtJS组件的效果相媲美,适用于电子政务系统或类似的企业级...

    一个jQuery插件让你可以为实用的图像加载事件添加一个回调

    $.fn实际上是jQuery对象的原型,因此这个方法可以应用于任何jQuery选择器选取的元素集合上。 ```javascript (function($){ $.fn.waitForImages = function(callback, finishedCallback, waitForAll) { // 插件的...

    jQuery Mobile开发常用技巧

    构建一个基本的 jQuery Mobile 页面通常需要以下结构: ```html <!DOCTYPE html> <title>Page Title <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css"/> ...

    jQuery.js执行过程分析

    这一设计确保了即使页面中包含多个jQuery脚本文件,也只会有一个jQuery实例被加载和使用。 2. **构造函数与命名空间**: jQuery定义了一个构造函数,同时通过`window.$ = jQuery;`将jQuery绑定到全局变量`$`,方便...

    jQuery插件,jQuery插件

    2. **扩展jQuery**:然后,使用`.fn`(即`jQuery.fn`)来扩展jQuery的原型,这样你的函数就能作为jQuery的一个方法被调用。例如: ```javascript (function($) { $.fn.myPlugin = function(options) { // 插件...

    教你如何做一个自己的jQuery插件,jQuery扩展笔记

    2. **挂载到jQuery对象**:然后,我们将这个函数绑定到jQuery的原型链上,使得所有jQuery选择器都可以访问到这个插件。 ```javascript $.fn.extend({ share: share }); ``` 这里的`$.fn`是jQuery的实例方法集合,...

    深入理解jquery和javascript系列

    而《jQuery源码分析系列》则可以帮助你深入理解jQuery的工作原理,提升你的编程技能。这三份资料将从理论到实践,全面解析JavaScript和jQuery的世界,对于任何希望在前端领域深入发展的开发者来说都是宝贵的资源。

    基于Jquery的网站设计

    这个主题可以用来展示如何利用Jquery创建具有文化特色的交互元素,比如图片滑动展示、文化介绍的折叠效果或者地图导航等。 在实际的项目实施中,学生会学习到以下知识点: 1. Jquery基本语法:如何选择器选取DOM...

    jquery1.12.4与jquery1.12.4.min

    《jQuery 1.12.4与jQuery 1.12.4.min——JavaScript库的高效选择》 jQuery,作为一款广泛使用的JavaScript库,极大地简化了网页中的...尽管如此,对于简单的DOM操作和快速原型开发,jQuery仍然是一个极具价值的工具。

    jquery库分解文件

    同时,熟悉JavaScript的原型链和闭包机制也对理解jQuery的实现至关重要。了解了这些基础知识后,再逐个分析分解后的文件,你会发现jQuery是如何优雅地处理浏览器兼容性问题,以及如何通过封装提高代码效率的。 总的...

    jQuery原型属性和原型方法详解

    接下来是jQuery原型中定义的几个方法。size方法返回匹配元素集合的元素个数,与length属性相同。而get方法则提供了一个返回指定索引处的元素的途径。例如,$('li').get(0)会返回第一个li元素。 toArray方法将jQuery...

    jquery灯箱插件Lightbox

    jQuery Lightbox是一款广泛使用的JavaScript插件,专为网页上的图片展示设计,它能够在用户点击图片链接时,弹出一个半透明的遮罩层,上面显示大图,提供了一种优雅的方式来展示网页中的图片。这款插件自发布以来,...

    jQuery.extend和jQuery.fn.extend的区别

    在JavaScript的世界里,jQuery是一个非常流行的库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。在jQuery的API中,`jQuery.extend`和`jQuery.fn.extend`是两个重要的方法,它们用于合并对象属性,但...

    jQuery源码分析-03构造jQuery对象

    首先,让我们从整体上理解jQuery构造函数的设计思路。 ##### 总体结构 在jQuery的源码中,通过立即执行函数表达式(IIFE)来定义jQuery对象。这种设计可以避免全局命名空间的污染,确保jQuery内部实现的私有性。...

Global site tag (gtag.js) - Google Analytics