jQuery源码初探（2）

接着上一篇，今天我们来看看 jQuery 中主体 ：

  function( window, noGlobal ) { 
    /***jQuery code***/
  }

方法中是如何实现的；

jQuery 主体差不多 1w 多行代码 ， 如果笼统的去阅读 ， 会显得十分凌乱 ， 没有条理，所以，我们在阅读源码之前，首先要做的就是先大概梳理一下 jQuery 的一个整体的框架 ， 结构 。这样会使我们阅读的时候条理和思路比较清晰，有利于我们对其进行分析。

我们在查阅 jQuery 的文档的时候 ， 就会发现文档会把 jQuery的方法分成不同的种类，比如选择器，延迟对象，回调函数，事件绑定等，其原因就是 jQuery 内部差不多就是这么划分的，也是按照这个框架进行设计的，所以我们纵观整个源码，可以大概将其分为下面几个部分（ps：我只是列举了一些主要的部分，关于在阅读过程中，我们在看到在中间定义的一些方法，我们用到的时候再去看哈~）：

—首先jQuery定义了一些变量、函数和几个正则表达式 ，其中变量主要是一些 数组 和 对象的一些方法 ，函数主要是以下三个（这几个我们到时候说，先梳理框架~），

    function DOMEval( code, doc ) {  /***code***/ }

    jQuery = function( selector, context ) {
        return new jQuery.fn.init( selector, context );
    }

    fcamelCase = function( all, letter ) {
        return letter.toUpperCase();
    }

正则主要是这三个（…以后说，同上哈~）

    rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
    rmsPrefix = /^-ms-/,
    rdashAlpha = /-([a-z])/g,

—接着是给jQuery的原型添加一些属性和方法，对应的源码就是下面这一部分

    jQuery.fn = jQuery.prototype = {
        /****code****/
    }

—jQuery的继承方法，也是 jQuery 给我们提供编写插件的入口方法，对应的是源码中的

    jQuery.extend = jQuery.fn.extend = function() { 
       /****code****/
    }

—紧接着我们看到源码中

    jQuery.extend( {  
        /***一个很大的对象***/
    })

这一段，主要是 拓展了 一些 工具方法，比如 isFunction() , isWindow() 等，方便我们使用；

— 接着是jQuery中最为庞大的一部分–复杂选择器的实现（Sizzle），整体应该有 2500多行代码，这部分主要帮我们解决了我们实际开发中的各种复杂元素的选择。（ps：Sizzle其实是一个比较独立的模块，可以去单独拿出来使用，有兴趣的同学可以下载下来试试看。Sizzle下载）

    var Sizzle = (function( window ) {
        /***此处省略好几千行0.0***/
    }

—Sizzle复杂选择器之后，就是jQuery函数的统一管理方法，即$.Callbacks()，给我们提供的api（add() , lock()等方法）可以方便我们对函数进行管理，对应源码中的部分

    jQuery.Callbacks = function( options ){
        /***code***/
    }

—之后是jQuery提供对异步统一管理–延迟对象（Deferred） ，简单说，deferred对象就是jQuery的回调函数解决方案；相信异步的好处，不言而喻，但是带来的不足就是，如果管理不当，就会无法获取函数当前的执行流程，因此对异步管理也是十分重要的；

    jQuery.extend( {
        Deferred: function( func ) {
            /***code***/
        },
        /***code***/
    }

— 函数方面的管理完成之后，接下来就是对数据的存储，就是我们常用的$.data 方法，这一部分主要是用于我们对数据的存储和管理，等到时候我们细说~

—上面也提到了，异步会导致我们代码的执行顺序发生紊乱，因此，jQuery提供了队列方法（queue()），专门用来管理代买的执行顺序，保证代码的有序运行，

    jQuery.extend( {
        queue: function( elem, type, data ) {
            /***code****/
        },
        dequeue: function( elem, type ) {  
            /***code****/
        },
        /***省略省略****/
    });
    /***及后面的一堆****/

—紧接着，是对常用的元素的基本效果的一个拓展，（也就是show() , hide() , toggle()），其中这部分代码的主体在源码中对应的如下部分：

jQuery.fn.extend( {
    show: function() {
        /****code***/
    },
    hide: function() {
        /****code***/
    }
    toggle: function( state ) {
        /****code***/
    }
} );

—接着也是 比较重要的 部分，就是 jQuery 对事件的处理 ，包括常用的 ( on() , off() 等)，这一块的代码也会比较多，看起来也比较复杂（ps：大概瞄了一眼….发现后面还有一部分），慢慢来吧~

— 处理完事件，接着就是对DOM节点的操作，添加 删除 获取 包装 DOM筛选（append() , prepend() 等），其主要代码对应源码中这一部分。

    jQuery.fn.extend( {
        detach: function( selector ) {
            /****code***/
        },

        remove: function( selector ) {
            /****code***/
        },
        /****code***/
    })

— 既然操作DOM，那就应该要有CSS来修饰 ， 否则 ， 页面就会 五花八门， 所以 ， jQuery 就在DOM 操作之后为我们提供了强的的操作元素样式的方法（css() ），阅读源码发现仅一个函数：

jQuery.fn.extend( {
    css: function( name, value ) {
        /***code***/
    }
} );

但是这个函数的实现却不简单，因为要关心浏览器的兼容问题，等到时候我们一起学习~

—如果直接添加样式 有时候难免会觉得单调，要是能加点动画岂不是完美， jQuery 为我们想好了这一点，便在 样式操作之后 为我们提供了 元素的动画操作 ， 包括 一些 fadeIn() slideDown() 以及高级的自定义动画方法 animate();

— 现在我们可以添加元素，操作元素的样式，给元素加动画，是不是还缺少操作元素的属性呢，答案是肯定的，jQuery 给我们提供的 attr() , prop() , addClass() 等丰富的 api 供我们使用~这一块代码有点分散，我们到时候一探究竟吧！

— 接下来是数据发送模块 ， 主要是 ajax 这一块，平时 相信很多 都是直接调用的 jQuery 封装的ajax方法吧，那么这些好用的函数 如何具体实现 ，我们拭目以待。

— 哦，对啦，还有就是元素位置和尺寸的方法的这块 ， jQuery.3.0.0 将这一块写在来后面，主要是获取元素的offset ， position 等相关位置信息， 以及元素 height( ) ， width( ) 等相关的尺寸信息~

总算是大概梳理了一遍，最后我们只要

    window.jQuery = window.$ = jQuery;

将其挂载到全局 window 的 jQuery 属性下 ， 就算大功告成了~
（ps：我在梳理的时候也没读完，只是浏览了一下，如果有哪里写的不对或者不充分的地方，还请大家指出来，我回慢慢改进的~）