jQuery 的 extend 與 fn.extend 差別

使用擴展的好處，是讓你透過 jQuery 去定義原先不存在的功能，方便你擴充 jQuery 既有的功能。在探討 jQuery 的擴展功能時，也因此就會分為兩類：靜態全域 ，或 需依附於元素。

1. 靜態全域 (jQuery.extended)
   定義後，只需使用 jQuery 的前置符號就可以使用。
2. 需依附於元素(jQuery.fn.extend)
   定義後，只針對 jQuery 所選取的元素有效。

我引述西風瘦馬所提供的程式來介紹：

jQuery.extended
所定義的 add 方法， jQuery 任何時候都可以叫用。

<script>
jQuery.extend({
    add: function(a, b) {
        return a + b;
    }
});

alert($.add(3, 4)); //7
</script>

jQuery.fn.extend
所定義的 red 方法，必須是某個 jQuery 所挑選到的元素才能使用。如範例，符合 $('#test') 的所有元素，都可以執行 red( )。

<script>
jQuery.fn.extend({
    red: function() {
        return $(this).css('color', '#ff0000');
    }
});

$('#test').red();
</script>

上述所介紹，都是針對 jQuery 原先所沒有的功能而進行新增。但有個問題來了，假設如果原先就已經存在了某個方法 add( )，但擴展的方法也同樣有個方法 add( )，那不就鬧雙包？接下來的問題，則是要以誰的為主？是元配，還是新歡呢？通常都是只見新人笑，不見舊人哭囉～在 jQuery 官網上可以找到這問題的處理方式。

情況一：合併兩個物件，後面的物件內容會覆蓋前面的物件內容

var object1 = {
  apple: 0,
  banana: {weight: 52, price: 100},
  cherry: 97
};
var object2 = {
  banana: {price: 200},
  durian: 100
};

$.extend(object1, object2);

//結果
object1 === {apple: 0, banana: {price: 200}, cherry: 97, durian: 100}

情況二：合併兩個物件，後面物件內容裡的詳細屬性會覆蓋前面內容裡的詳細屬性（若前面內容裡的詳細屬性沒有重複，會被保留下來，也可視為深層合併）

var object1 = {
  apple: 0,
  banana: {weight: 52, price: 100},
  cherry: 97
};
var object2 = {
  banana: {price: 200},
  durian: 100
};

$.extend(true, object1, object2);

//結果
object1 === {apple: 0, banana: {weight: 52, price: 200}, cherry: 97, durian: 100}

情況三：合併兩個物件，但不會影響到這兩個物件的預設值。這是常見的 plug-in 開發模式作法。

var empty = {}
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend(empty, defaults, options);

//結果
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }

綜合以上三個範例，

如果你想要對合併物件進行深層的物件合併，要在第一個參數加上 true
如果你不想影響2個合併物件的預設值，要採用情況三的開發模式
而其他，就是後面物件蓋掉前面物件了

參考：
1. http://blog.tugai.net/2009/07/22/jquery-fn-extend/
2.http://www.cnblogs.com/rhythmK/archive/2009/10/19/1585847.html
3.http://hzjavaeyer.group.javaeye.com/group/blog/232971
4.http://api.jquery.com/jQuery.extend/