jQuery源码学习(一)

使用版本:jQuery1.5.0-b1.js,总计8068行代码,网上有简单的源码分析,我也是参照学习一遍

  1. 定义 jQuery 函数 ( 代码  20 - 1081 行)
  2. 生成 jQuery.support (代码 1083 - 1276 行)
  3. 和 data 有关扩展 (代码 1279 - 1510 行)
  4. 和队列有关扩展 (代码 1514 - 1605 行)
  5. 和属性有关扩展 (代码 1609 - 1988 行)
  6. 和事件有关扩展 (代码 1993 - 3175 行)
  7. 内部的Sizzle CSS Selector Engine (代码 3183 - 4518 行)
  8. 和节点有关扩展 (代码 4520 - 5492 行)
  9. 和样式有关扩展 (代码 5497 - 5825 行)
  10. 和ajax有关扩展 (代码 5830 - 7172 行)
  11. 和效果有关扩展 (代码 7176 - 7696 行)
  12. 和定位有关扩展 (代码 7700 - 8065 行)
 1 jQuery.extend = jQuery.fn.extend = function () {
 2     var options, name, src, copy, copyIsArray, clone,
 3 target = arguments[0] || {}, //[Object{...}]
 4     //js逻辑或,默认会对或运算两边的数值进行Boolean(操作数)运算
 5     //Object当且仅当null值时返回false
 6     //js逻辑或的特点:
 7     //如果第一个操作数是对象,则返回第一个操作数;
 8     //如果第一个操作数的求值结果为false,则返回第二个操作数;
 9     //如果两个操作数都是对象,则返回第一个操作数;
10     //如果两个操作数都是null,则返回null;
11     //如果两个操作数都是NaN,则返回null;
12     //如果两个操作数都输undefined,则返回undefined;
13 i = 1,
14 length = arguments.length,//jQuery.extend传入的是通过对象字面量创建的对象[Object{...}]拥有单个值的数组
15 deep = false;
16 
17     // Handle a deep copy situation
18     if (typeof target === "boolean") {
19         deep = target;
20         target = arguments[1] || {};
21         // skip the boolean and the target
22         i = 2;
23     }
24 
25     // Handle case when target is a string or something (possible in deep copy)
26     if (typeof target !== "object" && !jQuery.isFunction(target)) {
27         target = {};
28     }
29 
30     // extend jQuery itself if only one argument is passed
31     if (length === i) {
32         target = this; 
33         //当jQuery.extend为jQuery扩展静态方法时,target = { fn:{},extend:function(){},prototype:{} }
34         //当jQuery.fn.extend为jQuery扩展成员函数时,target = { fn原有的对象 }
35         --i;
36     }
37 
38     for (; i < length; i++) {
39         // Only deal with non-null/undefined values
40         if ((options = arguments[i]) != null) {
41             // Extend the base object
42             for (name in options) {
43                 src = target[name];
44                 copy = options[name];
45 
46                 // Prevent never-ending loop
47                 if (target === copy) {
48                     continue;
49                 }
50 
51                 // Recurse if we‘re merging plain objects or arrays
52                 if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {
53                     if (copyIsArray) {
54                         copyIsArray = false;
55                         clone = src && jQuery.isArray(src) ? src : [];
56 
57                     } else {
58                         clone = src && jQuery.isPlainObject(src) ? src : {};
59                     }
60 
61                     // Never move original objects, clone them
62                     target[name] = jQuery.extend(deep, clone, copy);
63 
64                     // Don‘t bring in undefined values
65                 } else if (copy !== undefined) {
66                     target[name] = copy;
67                     //当target是jQuery.extend时,需要添加的成员就会跑到jQuery下面,从而成为jQuery的静态方法,通过$.静态方法
68                     //当target是jQuery.fn.extend时,需要添加的成员就会跑到jQuery.fn下面,而且jQuery.fn = jQuery.prototype,原型扩展就会使得新添加的成员是jQuery的成员函数,从而通过$("#id").成员函数
69                 }
70             }
71         }
72     }
73 
74     // Return the modified object
75     return target;
76 };

今天就分享一下jQuery扩展自己的方式

jQuery源码学习(一),古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。