$.extend() 和 $.fn.extend() 使用

jQuery为插件的开发提供了两个方法，一个是$.extend(),另一个是$.fn.extend()，$.fn.extend() = $.prototype.extend(),即是在原型链中添加对象方法，当定义一个对象的时候，该对象一生成就具有$.fn.extend()中声明的方法，可以直接调用。

如果将jq源码解压缩格式化之后，就会看到$.fn实际定义的时候与$.prototype相等，我这是3.2.1版本的源码：

其实在源码最后又可以看到如下：

定义了全局的window.jQuery = window.$ = jQuery，故而就可以发现，在我们自己写的脚本中使用的例如获取元素的$('#tid') 以及 jQuery('#tid') ,都是这里定义的window.jQuery 和 window.$ ,而连等号最右侧的jQuery，其实只是源码中声明的对象：

可以看到，这里定义了插件版本号version，以及var jQuery = function(){......}的初始化，等等。然后通过jQuery.extend 以及 jQuery.fn.extend() 不停地给插件封装方法。

jQ源码结构如下：所有方法都在红框圈出的function中，因此我们通过jQuery.fn.extend新增的方法也要写在其中

下面我们就来试着使用$.extend自己封装一些方法并调用，在源码加入如下封装的方法：

注意：浏览器可能会报错 unexpected end of input ，这是检测到代码不规范，将注释部分去掉即可

//$.extend()添加类方法,实际就是jq的静态方法（可将此段以及下段代码放入源码中测试）
        jQuery.extend({
            addNum:function(a,b){
                return a+b;
            },
            age:120  //然而这样做并没有意义
        });

        //$.fn.extend()
        jQuery.fn.extend({
            //在prototype原型链为对象添加方法
            consoleWhileClick:function(){
                jQuery(this).click(function(){
                    console.log('click one button');
                });
            },
            //在prototype原型链为对象添加属性
            age:110
        });

然后在我们自己的脚本中调用：

<script>
    $(document).ready(function(){
        var num = $.addNum(3,4);
        console.log("num = "+num);       //7
        console.log($.age);              //120

        $('#but').consoleWhileClick();   //点击 #but 按钮的时候打印 click one button
        console.log($('#but').age);      //110
        console.log($('body').age);      //110
        console.log($('div').age);       //110
    });
</script>

更多内容查看：点击打开链接