拨开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(); 在实例化一个对象后调用的方法。