jQuery.extend

jQuery.extend的用法 转载

有網友提問，看不太懂jQuery.extend的用法，本想在留言裡回覆，但寫著寫著，發現要說到淺顯白話，還真得花些篇幅，索性另起一篇，解釋得更詳細點。

以jQuery.extend(objA, objB)為例，你可以想像成objA與objB各有一些屬性(方法也會比照處理，在此只提屬性)，extend()會將objB有而objA沒有的屬性加到objA裡，如果objB裡的某個屬性，objA裡剛好也有同名的屬性，則會用objB的屬性值去覆寫objA原有的屬性。objA最後就是整合結果，或者也可以由var objC = jQuery.extend(objA, objB)取得整合結果(objA == objC)。

例如以下的程式碼，大家可以丟到Mini jQuery Lab跑一下，馬上就可以驗證jQuery.extend的效果:

排版顯示 純文字

var objA = { speed:"slow" };

var objB = { speed:"fast", power:"hard" };

var objC = jQuery.extend( objA, objB );

document.write("<dt>objA");

for (var p in objA) { document.write("<dd>" + p + "->" + objA[p]); }

document.write("<dt>objC");

for (var p in objC) { document.write("<dd>" + p + "->" + objC[p]); }

所得結果objA與objC的內容相同，都有兩個屬性speed:"fast"(被覆寫), power:"hard"(新加的)。

jQuery.extend可以支援多個物件屬性/方法的整併，並不限於兩個。例如: jQuery.extend(objA, objB, objC)，objB, objC多出的屬性都會加到objA裡，如果有objA已有同名屬性，則會用objC/objB裡的屬性值覆寫之，若objB, objC都用同名屬性，則會排在後方的objC為準(後令壓前令)。

jQuery.extend的最常見的用途是用來處理Plugin或函數的傳入參數，比如函數會用到的參數有10個，但大部分情況呼叫時只需要指定其中一兩個，其餘的用預設值即可。於是我們可以在函數中宣告一個預設值物件objDefault，裡面已有10個屬性，呼叫函數時則傳入objOption，裡面只放入一兩個要變更的屬性值，經過var objSetting = jQuery.extend(objDefault, objOption)之後，我們得到10個"有指定用指定值，沒指定用預設值"的屬性供後續使用。舉個例子:

排版顯示 純文字

function addDiv(options) {

    var defaults = { 

        border: "solid 1px black",

        backgroundColor: "#cccccc",

        width: "200px", height: "50px",

    margin: "10px"

    };

    var settings = $.extend(defaults, options);

    $("<div></div>").css(settings).appendTo("body");

}

addDiv({ width: "400px" });

addDiv({ backgroundColor: "orange", height: "100px" });

希望這樣的說明夠清楚。