(转载)jQuery 1.6 源码学习（一）——core.js[1]之基本架构

在网上下了一个jQuery 1.2.6的源码分析教程，看得似懂非懂，于是还是去github上下载源码，然后慢慢看源代码学习，首先来说说core.js这个核心文件吧。

jQuery整体的基本架构说起来也并不复杂，但是要看明白还是要花一点功夫，core.js这个文件搭建起了jQuery的整个框架，该文件的基本内容我大致总结如下：

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

//将整个jQuery 对象作为一个外部接口 var  jQuery = ( function (){   var  jQuery = function ( selector, context ) {          //当执行形如$("p")的代码时会new一个jQuery.fn.init的对象，此对象一般我们称之为jQuery对象，下文中我将称其为jQuery实例对象，以与jQuery对象本身区分开来          return  new  jQuery.fn.init( selector, context, rootjQuery );      }, /*      ...      此处包含一些其他的变量，如正则表达式，useragent等      ...      */ //此处之所以把jQuery的原型与jQuery.fn绑定是因为fn可以作为其短名称出现 jQuery.fn = jQuery.prototype = { //jQuery对象的原型所在，其中的方法和属性可由jQuery实例对象访问      init ： function (){          //用以构建jQuery实例对象，最后返回一个类数组对象      },      /*      ...        其他属性和方法，例如length，jquery版本，以及许多访问jquery数组元素的方法      如：eq，get 等。        ...      */ } //绑定jQuery对象的原型链 jQuery.fn.init.prototype = jQuery.fn;   //extend 可由 jQuery对象（静态方法）以及实例对象（实例方法）访问 jQuery.extend = jQuery.fn.extend =  function (){      /*      ...      jQuery本身的所有内容几乎都是由extend方法所扩展的，包括jQuery插件机制也建立在此方法之上      该方法，      ...      */   };   jQuery.extend({      /*      jQuery自身核心的一些方法和属性，      包括 noConflict，isReady等      */ });   /* ... 此处是一些其他操作，例如浏览器检测，处理ready事件等 ... */ //最后返回jQuery供外部使用(作为全局对象） return  jQuery; })();

可以看出jQuery大致分为两个部分，一个是静态方法部分，一个是实例对象部分，而这两者都是通过同一个函数extend来进行扩展的，也许上面代码看起来还比较抽象，下图则描述了整个框架的关系：

这样整个结构就显得清晰多了。其中最右边的jQuery实例是通过new jQuery.fn.init得到的。这样，扩展到jQuery.fn上的方法即可以作为实例方法供jQuery实例访问，而扩展到jQuery对象本身上的方法则作为静态方法。

在core.js中调用了extend来扩展绝大部分核心方法，首先来分析一下extend方法：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

jQuery.extend = jQuery.fn.extend = function () {      var  options, name, src, copy, copyIsArray, clone,          target = arguments[0] || {}, //将第一个参数作为扩展的目标对象          i = 1,          length = arguments.length,          deep = false ;        // Handle a deep copy situation      //可以传递一个bool值进来用于表示扩展对象时是否是深拷贝      if  ( typeof  target === "boolean"  ) {          deep = target;          target = arguments[1] || {};          // skip the boolean and the target          i = 2;      }        // Handle case when target is a string or something (possible in deep copy)      // 当扩展对象是字符串时      if  ( typeof  target !== "object"  && !jQuery.isFunction(target) ) {          target = {};      }        // extend jQuery itself if only one argument is passed      if  ( length === i ) {      // 关键！!当调用$.extend时，this将绑定到jQuery对象上，此时扩展的方法或者属性将是静态的，      // 而调用$.fn.extend时则绑定到jQuery.fn上，此时扩展的均是实例方法，我们在撰写插件时可以在方法内部使用this，此时的this指向的是jQuery的实例对象          target = this ;          --i; //修正i，以便后面正确遍历对象      }      //以下便是扩展代码，既可以用于扩展jQuery，也可以用来扩展自定义的对象，此方法是公开的，更多可以参考jQuery文档      for  ( ; i < length; i++ ) {          // Only deal with non-null/undefined values          if  ( (options = arguments[ i ]) != null  ) {              // Extend the base object              for  ( name in  options ) {                  src = target[ name ];                  copy = options[ name ];                    // Prevent never-ending loop                  if  ( target === copy ) {                      continue ;                  }                    // Recurse if we're merging plain objects or arrays                  // 如果是合并普通对象或者数组时，采用递归方式进行深拷贝（比如当数组中嵌套数组或者对象嵌套对象时）                  // 在jQuery内部核心扩展方法时并没有用到此段代码，比如下面的isPlainObject，isArray方法都是用extend扩展到jQuery中的。                  if  ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {                      if  ( copyIsArray ) {                          copyIsArray = false ;                          clone = src && jQuery.isArray(src) ? src : []; //                        } else  {                          clone = src && jQuery.isPlainObject(src) ? src : {};                      }                        // Never move original objects, clone them                      target[ name ] = jQuery.extend( deep, clone, copy );                    // Don't bring in undefined values                  } else  if  ( copy !== undefined ) {                      target[ name ] = copy;                  }              }          }      }        // Return the modified object      return  target; };

转载于:https://www.cnblogs.com/yhspehy/p/6064517.html