摘要: 一幅图展示 jQuery 中各对象之间的关系,这就是很多人想要的最直观的总结 jQuery 的方式。在这篇文章中,一幅画展示整个 jQuery 的核心内容,并逐一解释。 ...
若干个月前,看到一篇文章,内容很简单,就是一幅图,展示的是 jQuery 中各对象之间的关系,当时就觉得,这就是我想要的最直观的总结 jQuery 的方式。在那篇文章中,也有很多人表示不解,说看不明白。这里我也重画了一幅,并逐一解释。附件提供了 visio 格式的文件。 ![](http://www.html5cn.org/data/attachment/forum/201407/02/165305rjhd9y3swbsbd3v6.jpg) 下面将结合 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~ |