jQuery.extend 函数详解

JQuery的extend扩展方法有两种形式:

形式一:

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

     这种中的target、object1、objectN都是Object类型。它的含义是将object1,objectN合并到target中,返回值为合并后的target,由此可以看出该方法合并后,是修改了target的结构的。如果想要得到合并的结果却又不想修改target的结构,可以如下使用下面:

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

下面介绍一些例子:

  1. <html> 
  2. <head> 
  3.   <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
  4. </head> 
  5. <body> 
  6.   
  7. <div id="log"></div> 
  8.   
  9. <script> 
  10. var object1 = { 
  11.   apple: 0, 
  12.   banana: {weight: 52, price: 100}, 
  13.   cherry: 97 
  14. }; 
  15. var object2 = { 
  16.   banana: {price: 200}, 
  17.   durian: 100 
  18. }; 
  19.   
  20. /* merge object2 into object1 */ 
  21. $.extend(object1, object2); 
  22.   
  23. var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) { 
  24.   var arr = []; 
  25.   $.each(obj, function(key, val) { 
  26.     var next = key + ": "; 
  27.     next += $.isPlainObject(val) ? printObj(val) : val; 
  28.     arr.push( next ); 
  29.   }); 
  30.   return "{ " +  arr.join(", ") + " }"; 
  31. }; 
  32.   
  33. $("#log").append( printObj(object1) ); 
  34. </script> 
  35.   
  36. </body> 
  37. </html> 

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

  1. <html> 
  2. <head> 
  3.   <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
  4. </head> 
  5. <body> 
  6.   
  7. <div id="log"></div> 
  8.   
  9. <script> 
  10. var defaults = { validate: false, limit: 5, name: "foo" }; 
  11. var options = { validate: true, name: "bar" }; 
  12.   
  13. /* merge defaults and options, without modifying defaults */ 
  14. var settings = $.extend({}, defaults, options); 
  15.   
  16. var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) { 
  17.   var arr = []; 
  18.   $.each(obj, function(key, val) { 
  19.     var next = key + ": "; 
  20.     next += $.isPlainObject(val) ? printObj(val) : val; 
  21.     arr.push( next ); 
  22.   }); 
  23.   return "{ " +  arr.join(", ") + " }"; 
  24. }; 
  25.   
  26.   
  27. $("#log").append( "<div><b>defaults -- </b>" + printObj(defaults) + "</div>" ); 
  28. $("#log").append( "<div><b>options -- </b>" + printObj(options) + "</div>" ); 
  29. $("#log").append( "<div><b>settings -- </b>" + printObj(settings) + "</div>" ); 
  30.   
  31. </script> 
  32.   
  33. </body> 
  34. </html> 

结果是:defaults -- {"validate":false,"limit":5,"name":"foo"}

        options -- {"validate":true,"name":"bar"}

        settings -- {"validate":true,"limit":5,"name":"bar"}

 

形式二:

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

      其中deep是Boolean类型,target、object1、objectN是Object类型。它的含义是:如果deep设为true,则递归合并object1,objectN合并到target中,返回值为合并后的target

下面举个例子:

  1. <html> 
  2. <head> 
  3.   <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
  4. </head> 
  5. <body> 
  6.   
  7. <div id="log"></div> 
  8.   
  9. <script> 
  10. var object1 = { 
  11.   apple: 0, 
  12.   banana: {weight: 52, price: 100}, 
  13.   cherry: 97 
  14. }; 
  15. var object2 = { 
  16.   banana: {price: 200}, 
  17.   durian: 100 
  18. }; 
  19.   
  20. /* merge object2 into object1, recursively */ 
  21. $.extend(true, object1, object2); 
  22.   
  23. var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) { 
  24.   var arr = []; 
  25.   $.each(obj, function(key, val) { 
  26.     var next = key + ": "; 
  27.     next += $.isPlainObject(val) ? printObj(val) : val; 
  28.     arr.push( next ); 
  29.   }); 
  30.   return "{ " +  arr.join(", ") + " }"; 
  31. }; 
  32.   
  33. $("#log").append( printObj(object1) ); 
  34. </script> 
  35.   
  36. </body> 
  37. </html> 

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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章