宏观解析jQuery框架源码

对于jQuery只停留在应用是可悲的，在做项目的过程，jquery源码一度成为了自己开发的瓶颈，利用了近一天的时间对其宏观上进行了彻底的分析，收获颇丰，分享于此——

在此说明，所研究的jQuery框架版本为1.7.2。

宏观而言，jQuery框架可分为3个步骤——

1.定义jQuery变量
2.扩充jQuery变量及jQuery.fn变量(利用jQuery及jQuery.fn命名空间进行方法的填充)
3.将jQuery置于全局

其细节如下——

/**
  * 1.定义jQuery变量
  *  var jQuery = (function () {
  *
  *        //定义一个局部变量jQuery
  *        var jQuery = function(selector, context) {
  *            //这是所有jQuery选择器的开始
  *            return new jQuery.fn.init(selector, context, rootjQuery);
  *        },
  *
  *        //接着定义其他变量，最主要的是对jQuery函数原型的改造
  *         //两者皆为指针，并指向同一起始位置，但后续对两个对象的扩充，使得两者能够指向的位置域有所不同
  *        jQuery.fn = jQuery.prototype = {
  *            constructor: jQuery,
  *            init: function(){...},//定义了所有jQuery选择器的开始
  *            //还定义了其他的基础方法，如
  *            size: function(){...},
  *            toArray: function(){...},
  *            get: function(){...},
  *            ......
  *            port: [].sort,
  *            splice: [].splice
  *        };
  *
  *        //对上面定义的init函数重置原型
  *        jQuery.fn.init.prototype = jQuery.fn;
  *
  *        //实现了jQuery原型的扩充
  *        jQuery.extend = jQuery.fn.extend = function() {
  *            ......
  *        }
  *
  *        //定义完jQuery命名空间下的extend方法，就可以直接扩充jQuery原型了
  *        jQuery.extend({
  *            noConflict: function(deep){...},
  *            //一系列方法...
  *        })
  *
  *        //鉴别构造器语句...
  *        //鉴别浏览器语句...
  *        //其他...
  *
  *        //要返回这个局部变量jQuery对象，赋值给外围的jQuery变量
  *        return jQuery;
  *
  *    )();
  *
  * 2.扩充jQuery变量及jQuery.fn变量(利用jQuery及jQuery.fn命名空间进行方法的填充)
  *     核心的两个方法——
  *     jQuery.extend({...})
  *     jQuery.fn.extend({...})
  *
  * 3.将jQuery置于全局
  *     在代码的***——
  *     window.jQuery = window.$ = jQuery;
  *
  */

选取3个例子进行深入研究——

(function ($) {

     /**
      * 测试-jquery选择器方法(初始化)、测试-append方法，流程解析如下——
      * 1>$('#test', 'body')调用jQuery函数(var jQuery = function(selector, context) {return new jQuery.fn.init(selector, context, rootjQuery);})
      *     先对选择器selector(即#test)，进行初始化，即(jQuery.fn.init('#test', 'body', [#document]))
      *     发现有context(即body)，那么要对body进行初始化，再调用$(context).find(selector)方法(即$('body').find('body'))
      * 2>对于append方法：会调用jQuery.fn.domManip方法(这个方法会调用jQuery.buildFragment方法)，最终会调用selector的dom元素的appendChild方法进行dom操作
      */
     $('#test', 'body').append('<div class="c2">implant content<div>');

     /**
      * 测试-扩展jQuery对象本身，即，用来在jQuery命名空间上增加新函数
      * 看了源码就会发现：
      *     它循环了传入的对象参数里面的key-value值，并对jQuery这个函数对象做了扩展，其key值正是传参的key值(min和max)
      */
     $.extend({
         min: function(a, b) { return a < b ? a : b; },
         max: function(a, b) { return a > b ? a : b; }
     });
     $.min(2,3); //2

     /**
      * 测试-扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。
      * 看了源码就会发现：
      *     它与jQuery.extend的调用方法是同一个方法，只不过它对jQuery.fn这个命名空间做了功能扩展
      */
     $.fn.extend({
         check: function() {
             return this.each(function() {
                 this.checked = true;
             });
         },
         uncheck: function() {
             return this.each(function() {
                 this.checked = false;
             });
         }
     });

 /**
  * 搜索jQuery变量，只要在这个代码段之前引入jQuery.js框架即可，在这个框架中，会把jQuery变量放置到window对象中
  * 源码如下：
  *         // Expose jQuery to the global object
  *         window.jQuery = window.$ = jQuery;  //这句放在了框架中的***一句，
  *                                             //这句之前，在框架中对jQuery这个局部对象变量(命名空间)，做了方法及属性的填充
  */
 })(jQuery);