jQuery源码整体结构(源码2.0.3)

时间:2022-11-13 16:35:45

拨开jQuery的面纱,最近了解了下jQuery源码整体框架。主要包括:

(1)  jQuery 核心模块

(2)  sizzle 选择器引擎

(3)  Deferred 异步队列

(4)  Support 浏览器测试

(5)  Data 数据缓存

(6)  queue 队列

(7)  event 事件处理

(8)  Dom 操作

(9)  CSS 操作

(10)Ajax实现

(11)动画效果

(12)位置

整个jQuery源码最外层是一个大的闭包:

(function(window, undefined){})(window);

它的实质就是将window参数传入一个匿名函数中执行,保证了在函数体内创建的变量不会影响到应用方的代码。其中参数undefined保证了函数体内的undefined是未被定义过的。

创建对象:

在函数体中创建了一个jQuery对象:

jQuery = function( selector, context ) {

      // The jQuery object is actually just the init constructor 'enhanced'

      return new jQuery.fn.init( selector, context, rootjQuery );

},

可以从代码中看到真正创建的对象是jQuery.fn.init对象,那为什么init对象和jQuery对象是一样的呢?

jQuery.fn = jQuery.prototype

jQuery.fn.init.prototype = jQuery.fn;

上面两行代码说明jQuery.fn是jQuery的原型,创建的init对象的原型继承了jQuery的原型,这样就保证了init对象就是我们需要的jQuery对象。为什么要这样创建一个对象呢?

完全可以新建一个函数来进行创建对象然后用jQuery函数进行调用,源码这样处理的优势在于可以充分利用javascript原型的特性来减少不必要的代码,让代码更加健全。

在源码的最后将函数内创建的jQuery对象赋给了window的全局变量,这样可以再外面进行直接的调用:

window.jQuery = window.$ = jQuery;

extend扩展:

在源码的各个功能模块中都会看到extend,在核心模块中进行了定义

jQuery.extend = jQuery.fn.extend = function() {};

其中jQuery.extend扩展的是静态方法,例如:ready(), trim(), each(), Ajax()等,这些可以用美元符号$直接调用,$.trim(). 而jQuery.fn.extend扩展的是对象方法,例如:$(‘#id’).data(); 在实例化一个对象后调用的方法。