jQuery核心源码解读.doc

总体架构 jQuery是个出色的javascript库，最近结合它写javascript，看了下源码。 先从整体、全局的看，jQuery的源码几乎都在下面的代码中： (function(){//……})(); 第一个括号里面是个匿名函数，第二个括号表示马上执行第一个括号里面的代码。首先明白，javascript里面是没有命名空间的，要保证你的javascript函数、对象与其他的不冲突，这里用了javascript的一个技巧：你的所有javascript函数、对象都在一个匿名函数里面定义，确保了所定义的函数、对象的有效范围，起到了命名空间的作用。既然作用范围在这个匿名函数中，怎么被别人使用呢?下面看它的下面代码： var jQuery = window.jQuery = function(selector, context) {//……}; 这里让jQuery库中最重要的对象jQuery成为了window对象的一个属性，这样就可以在其他地方像使用document(document也是window的一个属性)一样使用jQuery了。也许使用过jQuery的朋友惊讶－我没有使用jQuery对象，一直使用$的。没错，那是jQuery的同名对象： window.$ = jQuery; 现在明白了吧。 执行过程分析 JavaScript是一门基于对象的语言，而它的对象技术的实现又和其他语言有着很大的差异，在JavaScript中，一个类的定义一般采用下面这种模式（我所看到的）： // 定义一个构造函数；testClass(param1, param2) {??this.attr1 = param1;??this.attr2 = param2;?? ...}// 在prototype对象上扩展，加上相应的方法；testCtotype = {?? Method1: function() {...},?? Method2: function() {...},?? ...}// 定义一个实例；var test = new testClass(); 　　在jQuery.js中，同样也是这种模式，只不过它要复杂很多，而且它还定义了一个jQuery.extend()的静态方法来扩展类的功能，jQuery.js代码执行过程完整分析如下： // 防止多次载入而进行jQuery对象的判断；if ( typeof window.jQuery == undefined ) {?? window.undefined = window.undefined;??// jQuery的构造函数；??var jQuery = function( a, c ) { ... };??// jQuery的命名空间$；??if ( typeof $ != undefined ) jQuery._$ = $;??var $ = jQuery;??// 给jQuery的prototype增加一些基础方法和属性；??// 其中有些方法是调用下面的扩展方法实现的；??// 注意下面的jQuery.fn = jQtotype；?? jQuery.fn = jQtotype = {???? each: function( fn, args ) { ... },???? find: function( t ) { ... },???? ...?? };??// jQuery实现继承的方法；?? jQuery.extend = jQuery.fn.extend = function( obj, prop ) {...};??// 实现一些基础的函数，有大部分是上面调用；?? jQuery.extend({???? init: function() { ... },???? each: function( obj, fn, args ) { ... },???? find: function( t, context ) { ... },???? ...?? });??// 浏览器版本的检测；??new function() {???? jQuery.browser = { safari:..., opera:..., msie:..., mozilla:... };???? ...?? };??// jQuery.macros扩展，主要用于jQuery.init()，进行jQuery的初始化；?? jQuery.macros = {???? filter: [ ... ],???? attr: { ... },???? each: { ... },???? ...