浅谈jQuery.extend()和jQuery.fn.extend()

2019年8月31日 169次阅读 来源: 痞子猫

近来在看一些jQuery的插件源码，发现了jQuery.extend()和jQuery.fn.extend()两个要领在插件中用到的频次异常高，在网上查询了下，说的要么是不清楚，要么就是不好明白。基于此，我写下自身的一些看些，愿望人人斧正。在JS中并没有类的观点，不过为了好诠释或者是思想上的一致。我权且把jQuery看成了一个类，轻易明白。

jQuery.extend()，是扩大的jQuery这个类。
假定我们把jQuery这个类看成是人类，能用饭能喝水能跑能跳，如今我们用jQuery.extend这个要领给这个类拓展一个能唱歌的妙技。如许的话，不论是男子，女人，xx人…..等能继续这个妙技（要领）了。

jQuery.extend({
        test:function(){
            alert("我是测试~");
        }
    });    
$.test();    //弹出alert。test表明是jQuery的一个静态要领了。

这个扩大也就是所谓的静态要领。只跟这个类（jQuery）自身有关。跟你详细的实例化对象$(“#ID”)是没紧要滴。

Jquery的扩大要领原型是:　　　

extend(dest,src1,src2,src3...);

它的寄义是将src1,src2,src3…兼并到dest中,返回值为兼并后的dest,由此能够看出该要领兼并后，是修正了dest的构造的。假如想要获得兼并的效果却又不想修正dest的构造，能够以下运用：

var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。

如许就能够将src1,src2,src3…举行兼并，然后将兼并效果返回给newSrc了。以下例：

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

那末兼并后的效果

  result={name:"Jerry",age:21,sex:"Boy"}

也就是说背面的参数假如和前面的参数存在雷同的称号，那末背面的会掩盖前面的参数值。

省略dest参数
上述的extend要领原型中的dest参数是能够省略的，假如省略了，则该要领就只能有一个src参数，而且是将该src兼并到挪用extend要领的对象中去，如：
　　1、$.extend(src)
　　该要领就是将src兼并到jquery的全局对象中去，如：

 $.extend({
  hello:function(){alert('hello');}
  });

就是将hello要领兼并到jquery的全局对象中。

jQuery.fn.extend()，是扩大的jQuery这个类的对象。

说白了就是得这么用（假定xyz()是拓展的要领）：
$(‘selector’).xyz();
你如果这么用$.xyz()；是会出毛病滴。

(function($){
        $.fn.extend({
            xyz:function(){
                alert("我是测试对象的~~~");
            }
        });
    })(jQuery);

$("#ID").xyz();   //弹出alert，内容“我是测试对象的~~~”

总结，jQuery.extend()这个要领，主如果用来拓展个全局函数啦，比方$.ajax()这类，要不就是拓展个选择器啦，比方$.fn.each()，中选择器用。
大部分插件都是用jQuery.fn.extend()。

附：Jquery的extend要领另有一个重载原型：

extend(boolean,dest,src1,src2,src3...)

第一个参数boolean代表是不是举行深度拷贝，其他参数和前面引见的一致，什么叫深层拷贝，我们看一个例子：

var result=$.extend( true,  {},  
    { name: "John", location: {city: "Boston",county:"USA"} },  
    { last: "Resig", location: {state: "MA",county:"China"} } );

我们能够看出src1中嵌套子对象location:{city:”Boston”},src2中也嵌套子对象location:{state:”MA”},第一个深度拷贝参数为true，那末兼并后的效果就是：

result={name:"John",last:"Resig",
        location:{city:"Boston",state:"MA",county:"China"}}

也就是说它会将src中的嵌套子对象也举行兼并，而假如第一个参数boolean为false，我们看看兼并的效果是什么，以下：

var result=$.extend( false, {},  
{ name: "John", location:{city: "Boston",county:"USA"} },  
{ last: "Resig", location: {state: "MA",county:"China"} }  
                    );

那末兼并后的效果就是:

 result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}

以上就是$.extend()在项目中经常会运用到的一些细节。

更多资本上：去转盘网，若有兴致能够加我的Q群一同议论进修js，css，Python爬虫等手艺。（QQ群：512245829）

    原文作者：痞子猫
    原文地址: https://segmentfault.com/a/1190000006701159
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞