jQuery源码分析系列：总体架构

jQuery源码分析主要参考nuysoft的博客，主要用于个人的学习记录与总结。

jQuery源码总体架构:从总体上面来看jQuery的所有代码都被包含在这样一个自调用的匿名函数中。

　　(function(window,undefined){

　　　　//代码

　　})(window);

分析：

1.这样的一个自调用的匿名函数可以创建私有的命名空间，防止了命名冲突，避免破坏全局的命名空间。同时它可以立即执行一段代码，并把结果赋给变量；打破我们常规的先写函数，再调用的流程，简化书写。

2.匿名函数又叫函数直接量，有两种写法：

//这是立即调用函数使用的两种方式
(function(){
    console.log( this );
    console.log( arguments );
}(window));

(function(){
    console.log( this );
    console.log( arguments );
}(window))

3.传入变量window，可以将全局变量window转变为局部变量，在jQuery代码中访问，不用在到全局的作用域中间去，可以更快的访问。将window作为参数，可以在压缩代码的时候优化：

(function(a,b){})(window);//window被优化为a

4.由于undefined可以被重写，赋新的值。为了确保undefined真的未定义，所以将其作为参数传入。

总体架构：

(function(window,undefined){

　　var jQuery = function(selector,context){
　　　　return new jQuery.fn.init(selector,context,rootjQuery);
　　}
/*
　　工具函数
　　异步队列Deferred
　　浏览器检测  Support
　　数据缓存  Data
　　队列  queue
　　属性操作 Attribute
　　事件处理  Event
　　选择器  Sizzle
　　DOM 遍历
　　DOM 操作
　　CSS  操作
　　异步请求  AJAX
　　动画  FX
　　坐标和大小
*/

})(window);

(function(window,undefined){
　　//这里是外围调用的jQuery，即$
　　var jQuery = (function(){
　　//构建jQuery对象
　　　　var jQuery = function(selector,context){
　　　　　　return new jQuery.fn.init(selector,context,rootjQuery);
　　　　}
　　　　//jQuery对象原型
　　　　jQuery.fn = jQuery.prototype={
　　　　　　constructor:jQuery;//构造函数指向为jQuery
　　　　　　init:function(selector,context,rootjQuery){
              // selector有以下7种分支情况：
              // DOM元素
              // body（优化）
              // 字符串：HTML标签、HTML字符串、#id、选择器表达式
              // 函数（作为ready回调函数）
              // 最后返回伪数组
    　　　　}
　　　　}
　　　　//强制将jQuery.fn.init.prototype设置为jQuery.fn
　　　　jQuery.fn.init.prototype = jQuery.fn;

　　　　//合并内容到第一个参数中 后续的大部分扩展都是调用这个函数
　　　　jQuery.extend = jQuery.fn.extend = function(){}

　　　　//在jQuery上扩展静态方法
　　　　jQuery.extend({
           // ready bindReady
           // isPlainObject isEmptyObject
           // parseJSON parseXML
           // globalEval
           // each makeArray inArray merge grep map
           // proxy
           // access
           // uaMatch
           // sub
           // browser
　　　　});

　　　　// 到这里，jQuery对象构造完成，后边的代码都是对jQuery或jQuery对象的扩展
　　　　return jQuery;
　　})()
})(window);

 

先执行 jQuery.fn = jQuery.prototype，再执行 jQuery.fn.init.prototype = jQuery.fn，合并后的代码如下：

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

所有有挂载到jQuery.fn的方法，相当于挂载到了jQuery.prototype，即挂载到了jQuery 函数上（一开始的 jQuery = function( selector, context ) ），但是最后都相当于挂载到了 jQuery.fn.init.prototype，即相当于挂载到了一开始的jQuery 函数返回的对象上，即挂载到了我们最终使用的jQuery对象上。

 

最终 jQuery对象由以下部分组成：
1，挂在jQuery.prototype.init中的this上的属性或方法。
2，挂在jQuery.prototype.init.prototype上的属性或方法。
3，因为把jQuery.prototype赋值给了jQuery.prototype.init.prototype，所以挂在jQuery.prototype上的属性和方法也是jQuery对象的一部分。
4，通过jQuery.fn.extend({...})方式扩展的属性或方法（后续提到）。