• 大虾翻译(一):jQuery.extend()


      

      本文是在JavaScript之三里面链接内容的中文翻译。我会尽可能做到信达雅且保持作者原意不变,OK,let's Go!

      

      jQuery.extend(target,[object1],[objectN])

      jQuery.extend(目标对象,对象1,对象N)

        概述:合并2个或以上的对象属性到第一个对象上。(此处的意思就是将对象1对象N的属性合并到目标对象上,这里是直译的)

           jQuery.extend(目标对象,对象1,对象N)

             目标对象:

             类型:object

             接收传进来的其他对象的属性或者当它是唯一参数时,扩展jQuery命名空间  

             对象1

             类型:object

             包含要合并的额外属性

             对象N

             类型:object

             包含要合并的额外属性

           jQuery.extend([deep],目标对象,对象1,[对象N])  

             对象1

             类型:Boolean

             如果为true,则变为递归合并(又叫深度复制 [deep copy])

             目标对象:

             类型:object

             被扩展对象,接收新属性

             对象1

             类型:object

             包含要合并的额外属性

             对象N

             类型:object

             包含要合并的额外属性

      当2个或更多对象参数被添加到$.extend()里面时,所有这些对象的属性都会被合并到目标对象,如果参数为null或undefined时,则会被忽略。

      如果$.extend()里只有1个参数,则意味着目标对象被省略了,在此种情况下,jQUery对象本身会被当做目标对象。这样的话,你可以添加新方法到jQUery命名空间内,这对想要给jQUery添加新方法的插件开发者来说非常有用。

      注意:目标对象将会被修改然后被返回,但如果你想保留所有的初始对象,可以传递一个{}作为目标对象。//见最后一个例子

    1 var object = $.extend({}, object1, object2);

      通过$.extend()执行的合并默认情况下是非递归的,但如果前一个对象的属性本身是array或object类型,那么这个属性就会被第二个以及随后的具有同属性名的对象重写,他们的值不会合并,这在下面的例子中通过检查banana的值可以看到。但如果第一个方法参数传递的是true,则将会被递归合并。

      注意:不支持传递false给第一个参数。

      未定义属性不会被复制,但从原型中继承过来的属性则可以被复制,通过构造函数或者JavaScript类型比如 Date or RegExp创建的对象的属性不会被重建,而且将作为结果对象或数组的简单对象。

      在深度扩展中,Object 和 Array将会被扩展,但原始类型封装的对象比如 String, Boolean, 和 Number则不会,深度扩展周期数据结构将会导致错误。

      如果有超出这些方法的需求,只能用自定义方法来替代,或者是使用一个像lodash那样的库。

      

      案例:

      合并2个对象,修改第一个对象

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4   <meta charset="utf-8">
     5   <title>jQuery.extend demo</title>
     6   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
     7 </head>
     8 <body>
     9  
    10 <div id="log"></div>
    11  
    12 <script>
    13 var object1 = {
    14   apple: 0,
    15   banana: { weight: 52, price: 100 },
    16   cherry: 97
    17 };
    18 var object2 = {
    19   banana: { price: 200 },
    20   durian: 100
    21 };
    22  
    23 // Merge object2 into object1
    24 $.extend( object1, object2 );
    25  
    26 // Assuming JSON.stringify - not available in IE<8
    27 $( "#log" ).append( JSON.stringify( object1 ) );
    28 </script>
    29  
    30 </body>
    31 </html>

    Demo:

    {"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

      递归合并2个对象,修改第一个对象

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4   <meta charset="utf-8">
     5   <title>jQuery.extend demo</title>
     6   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
     7 </head>
     8 <body>
     9  
    10 <div id="log"></div>
    11  
    12 <script>
    13 var object1 = {
    14   apple: 0,
    15   banana: { weight: 52, price: 100 },
    16   cherry: 97
    17 };
    18 var object2 = {
    19   banana: { price: 200 },
    20   durian: 100
    21 };
    22  
    23 // Merge object2 into object1, recursively
    24 $.extend( true, object1, object2 );
    25  
    26 // Assuming JSON.stringify - not available in IE<8
    27 $( "#log" ).append( JSON.stringify( object1 ) );
    28 </script>
    29  
    30 </body>
    31 </html>

    Demo:

    {"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}

      合并默认值和设置值,且不修改默认值,这也是常见的插件开发类型。

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4   <meta charset="utf-8">
     5   <title>jQuery.extend demo</title>
     6   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
     7 </head>
     8 <body>
     9  
    10 <div id="log"></div>
    11  
    12 <script>
    13 var defaults = { validate: false, limit: 5, name: "foo" };
    14 var options = { validate: true, name: "bar" };
    15  
    16 // Merge defaults and options, without modifying defaults
    17 var settings = $.extend( {}, defaults, options );
    18  
    19 // Assuming JSON.stringify - not available in IE<8
    20 $( "#log" ).append( "<div><b>defaults -- </b>" + JSON.stringify( defaults ) + "</div>" );
    21 $( "#log" ).append( "<div><b>options -- </b>" + JSON.stringify( options ) + "</div>" );
    22 $( "#log" ).append( "<div><b>settings -- </b>" + JSON.stringify( settings ) + "</div>" );
    23 </script>
    24  
    25 </body>
    26 </html>

    Demo:

    defaults -- {"validate":false,"limit":5,"name":"foo"}
    options -- {"validate":true,"name":"bar"}
    settings -- {"validate":true,"limit":5,"name":"bar"}

      

  • 相关阅读:
    python3全栈开发-并发编程的多进程理论
    python3全栈开发-补充UDP的套接字、操作系统、并发的理论基础
    python3全栈开发-什么是粘包、粘包现象、如何解决粘包
    python3全栈开发-socket编程
    python3全栈开发- 元类metaclass(面试必考题)
    浏览器窗口
    SQL 笔记
    数据库连接字符串
    获取网卡地址信息
    启动所选择的应用程序
  • 原文地址:https://www.cnblogs.com/liudaxia/p/4910106.html
Copyright © 2020-2023  润新知