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}

 

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