jQuery源码解析（整体架构）

平常我们使用jQuery时一般主要为以下两种情况：

$(selector).addClass() 
$.ajax(settings)

根据使用方式，可以推断出jQuery：

是一个能创造出不同对象的函数；
是一个拥有诸多方法的对象；
jQuery与$同为一个函数的函数名。

根据假设我们推断函数的大致形式：

var jQuery = $ = function(selector,context){
    return {}   //返回一个对象
}
jQuery.xxx = function(arguments){ 
    //do something
};

由于每次均要返回一个不同的对象，所以最容易想到的方法是根据构造函数new一个对象。

var jQuery = $ = function(selector,context){
    return new Function(selector,context)
}
jQuery.xxx = function(arguments){ 
    //do something
};

此时，应当考虑构造函数Function()存放的位置，将它放置到原型中，并且每次制作jQuery插件时都用jQuery.fn来简化：

var jQuery = $ = function(selector,context){
    return new jQuery.prototype.init(selector,context);
}
jQuery.prototype = jQuery.fn = {
     init:function(selector,content){
            //to do something
          }
}
jQuery.xxx = function(arguments){ 
    //do something
};

若以$(selector).function()来调用方法须将方法存储在jQuery.prototype中，但是此时通过new jQuery.prototype.init(selector,context)创建的实例对象与jQuery.prototype无任何关系。由此，须让jQuery.prototype为创建实例的原型对象，改为：

var jQuery = $ = function(selector,context){
    return new jQuery.prototype.init(selector,context);
}
jQuery.prototype = jQuery.fn = {
     init:function(selector,content){
            //to do something
          }
}
jQuery.prototype.init.prototype = jQuery.prototype; //新增
jQuery.xxx = function(arguments){ 
    //do something
};

现在就能向jQuery.prototype中添加方法来拓展jQuery的功能了！

var jQuery = $ = function(selector,context){
    return new jQuery.prototype.init(selector,context);
}
jQuery.prototype = jQuery.fn = {
     init:function(selector,content){
            //to do something
      },
     addclass:function(arguments){
           //to do something
     }
}
jQuery.prototype.init.prototype = jQuery.prototype; //新增
jQuery.xxx = function(arguments){ 
    //do something
};

这样做没什么问题，但是jQuery作为一个十分成熟的开源框架，如果人人都往jQuery.prototype/或是jQuery自身中添加新方法会给框架的整体管理带来很大的麻烦。因此需要一个添加方法的正确途径；

var jQuery = $ = function(selector,context){
    return new jQuery.prototype.init(selector,context);
};
jQuery.prototype = jQuery.fn = {
     init:function(selector,content){
            //to do something
      }
}；
jQuery.prototype.init.prototype = jQuery.prototype; 
jQuery.extend = jQuery.fn.prototype.extend = function(obj){
      //   this.key = obj.key
};
jQuery.extend({
     ajax:function(arguments){ 
          //do something
};
jQuery.fn.extend({
       addclass:function(arguments){
           //to do something
     }
})

最后将jQuery用立即执行函数包裹起来，使jQuery融入开发环境中：

(function(window,undefined){
    var jQuery = $ = function(selector,context){
        return new jQuery.prototype.init(selector,context);
    };
    jQuery.prototype = jQuery.fn = {
         init:function(selector,content){
                //to do something
          }
    }；
    jQuery.prototype.init.prototype = jQuery.prototype; 
    jQuery.extend = jQuery.fn.prototype.extend = function(obj){
          //   this.key = obj.key
    };
    jQuery.extend({
         ajax:function(arguments){ 
              //do something
    };
    jQuery.fn.extend({
           addclass:function(arguments){
               //to do something
         }
    })
})(window);

jQuery源码解析（整体架构）

推荐阅读更多精彩内容