zoukankan      html  css  js  c++  java
  • jQuery.extend() 函数使用详解

      Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。

    一、Jquery的扩展方法原型是:

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

      它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:

    var newSrc=$.extend({},src1,src2,src3...);//也就是将"{}"作为dest参数,不修改desc结构

      这样就可以将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的全局对象中

    2、$.fn.extend(src)
       该方法将src合并到jquery的实例对象中去,如:

    $.fn.extend({
        hello:function(){alert('hello');}
    });
    //将hello方法合并到jquery的实例对象中

      下面例举几个常用的扩展实例:

    $.extend({
        net:{}
    });//这是在jquery全局对象中扩展一个net命名空间
    
    $.extend($.net,{
        hello:function(){alert('hello');}
    });//这是将hello方法扩展到之前扩展的Jquery的net命名空间中

    三、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"}}

      即为false时,不会合并嵌套的子对象

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

    四、实例:

    1、采用递归方式合并两个对象,并修改第一个对象。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>递归合并2个对象</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
    <div id="log"></div>
    <script>
    $(function () { 
        var object1 = {
            apple: 0,
            banana: {weight: 52, price: 100},
            cherry: 97
        };
        var object2 = {
            banana: {price: 200},
            durian: 100
        };
        /* object2 合并到 object1 中 */
        $.extend(object1, object2);
        //判断浏览器是否支持JSON:typeof JSON != "undefined",若不支持JSON,后面方法序列化json对象
        var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
            var arr = [];
            $.each(obj, function(key, val) {
                var next = key + ": ";
                next += $.isPlainObject(val) ? printObj(val) : val;//判断是否为嵌套子对象,是的话就递归
                arr.push( next );
            });
            return "{ " +  arr.join(", ") + " }";
        };
        $("#log").append( printObj(object1) );
    })
    </script>
    </body>
    </html>

    2、合并 defaults 和 options 对象,并且不修改 defaults 对象。这是常用的插件开发模式。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>常用插件开发模式</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
    <div id="log"></div>
    <script>
    $(function () { 
        var defaults = { validate: false, limit: 5, name: "foo" };
        var options = { validate: true, name: "bar" }; 
        /*合并默认值和选项,不修改默认对象。*/
        var settings = $.extend({}, defaults, options); 
        var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
            var arr = [];
            $.each(obj, function(key, val) {
                var next = key + ": ";
                next += $.isPlainObject(val) ? printObj(val) : val;
                arr.push( next );
            });
            return "{ " +  arr.join(", ") + " }";
        };
        $("#log").append( "<div><b>defaults -- </b>" + printObj(defaults) + "</div>" );
        $("#log").append( "<div><b>options -- </b>" + printObj(options) + "</div>" );
        $("#log").append( "<div><b>settings -- </b>" + printObj(settings) + "</div>" );
    })
    </script>
    </body>
    </html>

    五、定义和用法:

      jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

      注意:1. 如果只为$.extend()指定了一个参数,则意味着参数target被省略。此时,target就是jQuery对象本身。通过这种方式,我们可以为全局对象jQuery添加新的函数。
      2. 如果多个对象具有相同的属性,则后者会覆盖前者的属性值

      语法:

    $.extend( target [, object1 ] [, objectN ] ) 
    
    $.extend( [deep ], target, object1 [, objectN ] ) //指示是否深度合并

  • 相关阅读:
    数字滤波器
    PCL点云库:Kd树
    KNN算法与Kd树
    分布式锁与实现(一)——基于Redis实现
    Redis分布式锁的正确实现方式
    redis常用命令大全
    使用 Redis 实现排行榜功能
    RabbitMQ下的生产消费者模式与订阅发布模式
    java高级精讲之高并发抢红包~揭开Redis分布式集群与Lua神秘面纱
    Java进阶面试题大集合-offer不再是问题
  • 原文地址:https://www.cnblogs.com/goloving/p/7462931.html
Copyright © 2011-2022 走看看