若干个月前,在博客园中看到一篇文章
,内容很简单,就是一幅图,展示的是 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 的核心内容就是以上四块代码,诸如事件处理的代码,你都可以从以上四块代码找到影子
- 大小: 70.1 KB
分享到:
相关推荐
jQuery_的原型关系图
页面原型JQUERY UI 可直接替换UI CSS
一个小项目的界面原型,全是用jquery做的!
jQuery Mobile常用开发技巧,这里有最全面的技术描述,有最底层的技术指导。
第一部分(第1章)对jQuery的设计理念、总体架构和源码结构进行了介绍和分析,让读者对jQuery有整体的认识。 第二部分(第2章)详细介绍和分析了构造函数jQuery()的用法、构造过程、原型属性和方法、静态属性和方法。...
从网上搜的,忘了从哪了,学习的时候自己改了改,用起来蛮好用的。
边文章主要给大家介绍了jQuery原型属性constructor,selector,length,jquery和原型方法size,get,toArray,十分的详细,有需要的小伙伴可以参考下。
这是一个用jquery UI组件实现的比较完整后台管理系统java web工程,适合做完整的管理系统UI,跟extJs组件效果相似,这边是一个电子政务系统的demo工程
基于jQuery淡入淡出可自动切换的幻灯插件,原型是前几天写的一个幻灯效果,因为一个小bug卡了两天,然后清空之前写的代码,重新整理思路写出来的. 思维是个很诡异的东西,一旦陷入某个死角,很难逃出. 惟有冷却一些时间,...
用 easyui 1.1.1 做的一组界面原型,可用于学习easyui的使用. 针对 easyui 使用中的一些问题给出了解决方案.
于是就有了这个演示系统的产生。 作为系统的第一个版本,这个系统功能比较简单。我之前的设想,是用zend framework框架设计一个接近CMS功能的后台,统一用户管理、文章发布等常用功能,但这么一来,系统的适用范围就...
可以实现js的左键单击,双击,拖拽,右键单击,双击,拖拽,和中键的单击,双击和拖拽事件,以及滚轮事件,已经封装成jquery插件,调用方便,功能强大。
于是就有了这个演示系统的产生。 作为系统的第一个版本,这个系统功能比较简单。我之前的设想,是用zend framework框架设计一个接近CMS功能的后台,统一用户管理、文章发布等常用功能,但这么一来,系统的适用范围...
jQuery.extend 函数详解 Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
采用jQuery仿腾讯图片新闻组图幻灯,已做美化,感谢代码原型作者,本人在原来基础上进行了美化。
使用jQuery mobile框架完成的demo原型设计,只有前端和简单的交互,初学者和开发都有帮助!可以下载研究!
运用原型和闭包,使用原生js编写的jQuery库,里面已经编写基本的功能(获取dom元素、删除类、增加类)
JQueryeasyui 做的界面原型 v0.3