jQuery源码阅读2:用extend()和fn.extend()扩展方法

Posted on   |   In   |  

jQuery对象生成出来了, 下一步就是往里加方法 , 主要用的是extend()方法:
还是拆一下代码, 仅分析最简单的流程, 说明下工作原理.

1.源码第35行第一次调用jQuery.extned(), 仅传入一个包含函数的对象
这种情况就是给jQuery对象增加静态方法

2.源码1726行第一次调用jQuery.fn.extend(),也是传入一个包含函数的对象
因为上文书分析过

1
jQuery.fn = jQuery.prototype

所以这是给生成的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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
/**
 * 博文作者:ruantao1989@gmail.com
 * 出自博客:ruantao.duapp.com/blog
 */
//==>源码291行, 在上个示例jQuery.fn.init.prototype = jQuery.fn;后增加下面代码
        //一: 上文书说到操作jQuery.fn就是操作jQuery.fn.init.prototype. 此处的目的正是对返回的jQuery对象进行扩展
        //每次调用jQuery.extend或jQuery.fn.extend, 如果仅传一个参数, 即是对jQuery对象自身的扩展
        jQuery.extend = jQuery.fn.extend = function() {
            var options, name, src, copy, copyIsArray, clone,
                target = arguments[0] || {},//第一个传参,一般都是一个含有多个方法的对象{xxx:{yyy}..}
                i = 1,
                length = arguments.length,//仅有一个arguments[0]时,len等于1
                deep = false;
 
            //...deep copy的情况先忽略, 头一次扩展不需要
 
            //这个是对jQuery自身扩展的情况
            //以源码355行的代码为例(源码中第一次扩展), 每次扩展只传入一个对象,这里判断相等
            //this是jQuery对象, 之后要把传入的方法拷贝进target对象中
            if ( length === i ) {
                target = this;
                --i;
            }
 
            for ( ; i < length; i++ ) {
                //此处options是传入的待拷贝的各个函数
                if ( (options = arguments[ i ]) != null ) {
                    //遍历取函数名
                    for ( name in options ) {
                        src = target[ name ];
                        //copy是options中取出的其中一个函数
                        copy = options[ name ];
 
                        // Prevent never-ending loop
                        if ( target === copy ) {
                            continue;
                        }
 
                        //...deep copy的情况先忽略
 
                        //动态写入target,这里是jQuery对象
                        target[ name ] = copy;
                    }
                }
            }
 
            //完成一次扩展
            return target;
        };
 
        //==>源码355行
        //二: 源码中第一次运行extend()给jQuery增加静态方法
        jQuery.extend({
            //比如说要扩展isWindow()方法
            isWindow: function( obj ) {
                return obj != null && obj == obj.window;
            }
            //这里有好些方法挺好 比如each, 争取下次分析
        });
         
        //三:自己扩展一个静态方法
        jQuery.extend({
            staticFun: function( deep ) {
                alert("静态方法staticFun==>ruantao.duapp.com");
            }
        }); 
        //四:自己扩展一个原型方法
        jQuery.fn.extend({          
            prototypeFun: function( deep ) {
                alert("原型方法prototypeFun==>ruantao.duapp.com");
            }
        }); 
         
        //jQuery对象赋给window.$和window.jQuery, 方便访问
        window.jQuery = window.$ = jQuery;
    })(window);
      
      
    //五:验证扩展
    //5.1 验证静态方法
    $.staticFun()
     
    var $obj = $("");
    console.log($obj);
    //5.2验证原型方法
    $obj.prototypeFun();